The facing ribbon rides the mount

While the pane possesses a creature, the keymap's golden ribbon moves
to the mount's token — same shallow triangle, sized to the smaller
body, turning with the borrowed eyes — and leaves the wizard's brow
until the rider returns.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015RCWSTnb1KYTPyL4GmhGnF

packages/web/src/Board.svelte

@@ -24,6 +24,7 @@
     onEdgeClick,
     onPlayerClick,
     povFacing = null,
+    povCreatureId = null,
     onCreatureClick,
     onWarpClick,
     onCellPeek,
@@ -47,6 +48,8 @@
     /** Which way YOUR first-person camera faces: a wedge on your token
      * keeps the keymap and the pane pointing the same way. */
     povFacing?: "N" | "E" | "S" | "W" | null;
+    /** While the pane rides a creature, the ribbon moves to ITS token. */
+    povCreatureId?: string | null;
     onCreatureClick?: (creatureId: string) => void;
     onWarpClick?: (cell: { x: number; y: number }, side: Side) => void;
     /** Long-press on a square: read the card behind whatever occupies it. */
@@ -592,7 +595,7 @@
           {/if}
         {/if}
       </g>
-      {#if povFacing && p.id === view.you}
+      {#if povFacing && !povCreatureId && p.id === view.you}
         <!-- A short wide ribbon hugging the token's leading edge: base as
              wide as the token, rising a fifth of that outward. -->
         {@const fa = povFacing === "E" ? 0 : povFacing === "S" ? Math.PI / 2 : povFacing === "W" ? Math.PI : -Math.PI / 2}
@@ -653,6 +656,19 @@
           <text x="0" y="4" class="creature-label">{c.kind === "fire-imp" ? "I" : c.kind === "democratic-monster" ? "D" : c.kind[0]?.toUpperCase()}</text>
         {/if}
       </g>
+      {#if povFacing && povCreatureId === c.id}
+        <!-- The rider's facing ribbon, worn by the mount. -->
+        {@const fa2 = povFacing === "E" ? 0 : povFacing === "S" ? Math.PI / 2 : povFacing === "W" ? Math.PI : -Math.PI / 2}
+        {@const ch = CELL * 0.26}
+        {@const cfx = Math.cos(fa2)}
+        {@const cfy = Math.sin(fa2)}
+        {@const cpx = -cfy}
+        {@const cpy = cfx}
+        <polygon
+          points={`${cfx * ch + cpx * ch},${cfy * ch + cpy * ch} ${cfx * ch - cpx * ch},${cfy * ch - cpy * ch} ${cfx * ch * 1.5},${cfy * ch * 1.5}`}
+          class="pov-wedge"
+        />
+      {/if}
     </g>
   {/each}