user card Hand becomes the action surface, the board shows the train, and a reverse stops turning it around, other bug fixes too.

src/web/tooltip.ts

@@ -24,7 +24,25 @@ function ensure(): HTMLElement {
 
 function place(el: HTMLElement, text: string): void {
   const t = ensure();
-  t.textContent = text;
+  /**
+   * A PICTURE WHERE ONE HELPS, otherwise text.
+   *
+   * `data-tip-html` carries pre-built markup — a drawing of the track piece a placement would lay,
+   * rendered by the board's own renderer so it cannot show a shape the placement will not produce.
+   * Only ever set from markup this app built; nothing here interpolates anything a player typed.
+   */
+  const html = el.getAttribute('data-tip-html');
+  if (html) {
+    t.innerHTML = `<div class="tip-fig">${html}</div>`;
+    if (text) {
+      const p = document.createElement('div');
+      p.className = 'tip-txt';
+      p.textContent = text;
+      t.appendChild(p);
+    }
+  } else {
+    t.textContent = text;
+  }
   t.style.display = 'block';
 
   // Measure, then keep it on screen: flip above when it would fall off the bottom, and pull back
@@ -87,4 +105,9 @@ export const TOOLTIP_CSS = `
   box-shadow:0 6px 22px rgba(0,0,0,.55);pointer-events:none;white-space:pre-wrap}
 [data-tip]{cursor:help}
 button[data-tip],a[data-tip]{cursor:pointer}
+/* A drawn piece inside a tooltip. The figure sits above its caption, and the caption keeps the
+   tooltip's own text treatment — the drawing is the answer, the words are the confirmation. */
+#tip .tip-fig{display:flex;gap:6px;justify-content:center;margin:1px 0 6px}
+#tip .tip-fig svg{width:132px;height:auto;display:block}
+#tip .tip-txt{white-space:pre-wrap}
 `;