Mirror labels across NS axis (scale -1, 1)

Each label is now drawn inside a save/translate/scale(-1, 1)/
restore context, so the actual text appears horizontally
mirrored in the canvas. This is the user-requested 'NS
axis mirror' for the labels.

N/S characters are symmetric so they look the same mirrored
or not. But 'x=1100' and 'y=1100' now appear reversed (1011 etc.),
confirming the horizontal flip is in effect.

vendor/clouds3d.js

@@ -361,34 +361,34 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) {
         groundCtx.strokeRect(canvasX + 1, canvasY + 1,
             GROUND_TILE_SIZE - 2, GROUND_TILE_SIZE - 2);
 
-        // Burn labels into the four corners of the tile, NS-mirrored
+        // Burn labels into the four corners of the tile, mirrored
-        // (so N ends up at the bottom and S at the top, mirroring the
+        // across the NS axis (horizontal mirror via scale(-1, 1)).
-        // tile's own NS axis). User can read the tile identity
+        // Each label is drawn within a saved/flipped context so the
-        // directly from the rendered ground.
+        // text itself appears mirrored.
         groundCtx.fillStyle = 'rgba(255,255,255,0.95)';
         groundCtx.strokeStyle = 'rgba(0,0,0,0.85)';
         groundCtx.lineWidth = 3;
-        groundCtx.textAlign = 'left';
         groundCtx.font = 'bold 40px sans-serif';
+        // Helper: draw a horizontally-mirrored label at (x, y).
+        function mirrorLabel(text, x, y, align) {
+            groundCtx.save();
+            groundCtx.translate(x, y);
+            groundCtx.scale(-1, 1);
+            groundCtx.textAlign = align;
+            groundCtx.strokeText(text, 0, 0);
+            groundCtx.fillText(text, 0, 0);
+            groundCtx.restore();
+        }
         // S at top-left (image south after Y mirror is at canvas top)
-        groundCtx.strokeText('S', canvasX + 12, canvasY + 44);
+        mirrorLabel('S', canvasX + 12, canvasY + 44, 'left');
-        groundCtx.fillText('S', canvasX + 12, canvasY + 44);
         // N at bottom-left (image north at canvas bottom)
-        groundCtx.strokeText('N', canvasX + 12, canvasY + 244);
+        mirrorLabel('N', canvasX + 12, canvasY + 244, 'left');
-        groundCtx.fillText('N', canvasX + 12, canvasY + 244);
         // Tile coordinates, top-right and bottom-right corners
-        groundCtx.textAlign = 'right';
         groundCtx.font = 'bold 18px monospace';
         // y at top-right
-        groundCtx.strokeText('y=' + tileY,
+        mirrorLabel('y=' + tileY, canvasX + GROUND_TILE_SIZE - 12, canvasY + 28, 'right');
-            canvasX + GROUND_TILE_SIZE - 12, canvasY + 28);
-        groundCtx.fillText('y=' + tileY,
-            canvasX + GROUND_TILE_SIZE - 12, canvasY + 28);
         // x at bottom-right
-        groundCtx.strokeText('x=' + tileX,
+        mirrorLabel('x=' + tileX, canvasX + GROUND_TILE_SIZE - 12, canvasY + GROUND_TILE_SIZE - 12, 'right');
-            canvasX + GROUND_TILE_SIZE - 12, canvasY + GROUND_TILE_SIZE - 12);
-        groundCtx.fillText('x=' + tileX,
-            canvasX + GROUND_TILE_SIZE - 12, canvasY + GROUND_TILE_SIZE - 12);
 
         return true;
     }).catch(function() {