Playground: hide motion-export buttons on mobile (#109)

* playground: balance the mobile toolbar export buttons

The two motion-export buttons (Download BVH / Download glTF) auto-flowed into
the mobile toolbar grid and landed in the left half of a row, leaving the
right half empty and the cluster looking ragged.

Group them in a `.tb-downloads` wrapper that is `display: contents` on desktop
(so the desktop flex toolbar is unchanged) and becomes a single full-width
grid row split into two equal halves on mobile. No design-language changes:
same buttons, colours, and radius, just a balanced layout.

Signed-off-by: Claude <noreply@anthropic.com>

* playground: hide motion-export buttons on mobile instead of balancing them

A downloaded .bvh/.glb is only useful in a desktop pipeline (Blender, a
Three.js project, a game engine), so the export buttons have no real audience
on a phone. Hide .tb-downloads on mobile entirely rather than laying it out as
a row, which removes the third toolbar row and keeps mobile to the two rows
that matter. Desktop is unchanged and still shows both buttons.

Signed-off-by: Claude <noreply@anthropic.com>

---------

Signed-off-by: Claude <noreply@anthropic.com>
Co-authored-by: Claude <noreply@anthropic.com>

Author: a-baran-orhan

playground/play.html

@@ -119,22 +119,24 @@
           <span class="ico-link" aria-hidden="true"></span
           ><span class="lbl" aria-live="polite">Share</span>
         </button>
-        <button
-          id="download-bvh"
-          class="btn ghost"
-          aria-label="Download BVH"
-          title="Download the movement as a .bvh motion file for Blender and other tools"
-        >
-          <span class="lbl" aria-live="polite">Download BVH</span>
-        </button>
-        <button
-          id="download-gltf"
-          class="btn ghost"
-          aria-label="Download glTF"
-          title="Download the movement as a .glb glTF asset (rig + animation) for Three.js and web pipelines"
-        >
-          <span class="lbl" aria-live="polite">Download glTF</span>
-        </button>
+        <div class="tb-downloads">
+          <button
+            id="download-bvh"
+            class="btn ghost"
+            aria-label="Download BVH"
+            title="Download the movement as a .bvh motion file for Blender and other tools"
+          >
+            <span class="lbl" aria-live="polite">Download BVH</span>
+          </button>
+          <button
+            id="download-gltf"
+            class="btn ghost"
+            aria-label="Download glTF"
+            title="Download the movement as a .glb glTF asset (rig + animation) for Three.js and web pipelines"
+          >
+            <span class="lbl" aria-live="polite">Download glTF</span>
+          </button>
+        </div>
         <button
           id="copy-prompt"
           class="btn primary"

playground/src/style.css

@@ -301,6 +301,14 @@ select:hover {
   align-items: center;
 }
 
+/* The two motion-export buttons are grouped so mobile can lay them out as one
+   balanced row. On desktop the wrapper is transparent (`display: contents`),
+   so the buttons stay direct children of the flex toolbar and the desktop row
+   is unchanged. */
+.tb-downloads {
+  display: contents;
+}
+
 /* Movement-library trigger — the one content control in the topbar. Reads like
    a select (kicker, current movement, caret) but opens the full browse panel. */
 .lib-btn {
@@ -1599,6 +1607,13 @@ select:hover {
     grid-row: 2;
     min-height: 42px;
   }
+  /* Motion export (BVH / glTF) is a desktop-pipeline action — a downloaded
+     .bvh/.glb is only useful in Blender, a Three.js project, or a game engine,
+     none of which live on the phone. Hide it on mobile to keep the toolbar to
+     the two rows that matter (movement + primary CTA); it stays on desktop. */
+  .tb-downloads {
+    display: none;
+  }
   .intro { padding-left: 12px; padding-right: 12px; }
   .layout { grid-template-columns: 1fr; }
   .floor-guide-key {