Draw the board as track, split the site into three pages, and fix curve geometry

Adds SVG board rendering shared by the game and the replay, a splash page with a
shareable replay directory, hover tooltips for reference detail, and makes curves
two-port arcs so sidings and run-arounds can finally be built.

src/engine/apply.ts

@@ -1326,6 +1326,7 @@ function protoCard(
         kind: 'track',
         geometry,
         ...(v.axis ? { axis: v.axis } : {}),
+        ...(v.arc ? { arc: v.arc } : {}),
         ...(v.turnout ? { turnout: v.turnout } : {}),
         ...(v.bypass ? { bypass: v.bypass } : {}),
       },
@@ -1504,6 +1505,7 @@ function protoTrackCard(
       kind: 'track',
       geometry,
       ...(v.axis ? { axis: v.axis } : {}),
+      ...(v.arc ? { arc: v.arc } : {}),
       ...(v.turnout ? { turnout: v.turnout } : {}),
       ...(hand !== 'none' ? { hand } : {}),
     },

src/engine/state.ts

@@ -58,6 +58,13 @@ export type TurnoutOrientation = { stem: 'n' | 's' | 'e' | 'w'; through: 'n' | '
  * how many run each way, yet a layout with no north-south straight can never use the Office's
  * junction stubs at all.
  */
+/**
+ * A curve joins two ADJACENT edges. There are exactly four such arcs, and a card can be turned to
+ * any of them — which is what makes a siding possible: an arc reaching NORTH is the only way back
+ * up to the Running Track from the district below.
+ */
+export type TrackArc = 'ne' | 'nw' | 'se' | 'sw';
+
 export type TrackAxis = 'ew' | 'ns';
 
 export type CardGeometry =
@@ -66,6 +73,8 @@ export type CardGeometry =
       geometry: TrackGeometry;
       turnout?: TurnoutOrientation;
       axis?: TrackAxis;
+      /** Which two edges a CURVE joins — chosen on placement, since the card can be turned. */
+      arc?: TrackArc;
       /** Curves are printed left- or right-handed (design supply); not chosen on placement. */
       hand?: 'left' | 'right';
     }

src/engine/track.ts

@@ -23,6 +23,7 @@ import type {
   RollingStock,
   TrackCard,
   TrayId,
+  TrackArc,
   TurnoutOrientation,
 } from './state.ts';
 import { carsOn, coordKey, isOperationalRail, spaceOn } from './state.ts';
@@ -77,7 +78,12 @@ type PortPair = readonly [Port, Port];
  * - **facility** — a through track; the industry spur is the card's own spotting capacity rather
  *   than a separate port.
  */
-function connectionsFor(card: TrackCard): readonly PortPair[] {
+/**
+ * Exported so the board can DRAW what the engine believes. Deriving the rails from anything else
+ * would let a picture disagree with the rules about whether two cards join — which is the one thing
+ * a track diagram exists to settle.
+ */
+export function connectionsFor(card: TrackCard): readonly PortPair[] {
   switch (card.geometry.kind) {
     // Neither a Modifier nor a Space-use card is track: nothing connects, no train may enter.
     case 'modifier':
@@ -108,18 +114,22 @@ function connectionsFor(card: TrackCard): readonly PortPair[] {
             [o.stem, o.diverge],
           ];
         }
-        // A CURVE joins the through track to one diverging side — handedness is printed on the
-        // card, not chosen (the design supplies both hands). A SHARP curve is geometrically the
-        // same but costs two Moves to cross.
-        // Curves and turnouts diverge DOWNWARD from the through track (Q7); handedness decides
-        // which end of the through track the leg leaves from, not whether it goes up or down.
+        /**
+         * A CURVE IS AN ARC between two adjacent edges — one connection, no through track. The
+         * printed cards show exactly this (docs/tracks.png, rows 3-4): a single sweep from edge to
+         * edge with nothing running past it.
+         *
+         * It was previously modelled as a through track PLUS a diverging leg, which is a turnout —
+         * and made curves topologically identical duplicates of them. Worse, every leg diverged
+         * south, so no piece anywhere reached NORTH except an n-s straight. A district could
+         * therefore only ever be a vertical column: no siding, no parallel track, no run-around.
+         *
+         * A SHARP curve is the same shape and costs two Moves to cross.
+         */
         case 'curved':
         case 'sharpCurved': {
-          const stem = card.geometry.hand === 'left' ? 'w' : 'e';
-          return [
-            ['e', 'w'],
-            [stem, 's'],
-          ];
+          const arc = card.geometry.arc ?? (card.geometry.hand === 'left' ? 'sw' : 'se');
+          return [[arc[0] as Port, arc[1] as Port]];
         }
       }
   }
@@ -144,7 +154,10 @@ export const DEFAULT_TURNOUT: TurnoutOrientation = { stem: 'e', through: 'w', di
  * §A.1's constraint is preserved: a turnout's two legs still never join each other. Only the card's
  * rotation is free.
  */
+const ARCS: readonly TrackArc[] = ['ne', 'nw', 'se', 'sw'];
+
 export type TrackVariant = {
+  arc?: TrackArc;
   axis?: 'ew' | 'ns';
   turnout?: TurnoutOrientation;
   bypass?: Port;
@@ -167,9 +180,9 @@ export function variantsFor(geometry: TrackGeometry): TrackVariant[] {
       return TURNOUT_VARIANTS.map((t) => ({ turnout: t }));
     case 'curved':
     case 'sharpCurved':
-      // Handedness is printed on the card, and the leg always goes down (Q7), so nothing is left
-      // to choose — one variant.
-      return [{ axis: 'ew' }];
+      // All four rotations. A two-port arc has no handedness that survives turning — its mirror IS
+      // one of its rotations — so the printed hand governs supply, not what can be built.
+      return ARCS.map((arc) => ({ arc }));
   }
 }