Add zoom steps and a larger start caption to the game link (#266)

The released game only ever zoomed in whole steps up to 400%, so a
small camera on a large screen stayed far smaller than it could be.
The "Click to play" caption was drawn in the 11 px panel title size
and was easy to miss.

- GAME_SCALE_STEPS gains 300%, 500% and 600%. The game tab picker,
  Auto in the editor and the game link all read the same list.
- The start caption takes its size from the new Theme.captionSize
  (16) instead of a constant in GameScreen.
- The player page keeps the default arrow cursor at all times. It no
  longer switches to the hand over the caption.

Tests:
- view.test: Auto for 320x180 in 2000x2000 is now 6, with cases
  for 3 and 5. play-settings.test takes 2.5 and 8 as invalid steps.
- e2e 60 checks the caption against the panel title size and the
  arrow cursor before and after the start. Module 03 follows the new
  step list.
- ./check.sh 2808 tests, CHECK EXIT 0 (before the last Theme tweak,
  which changes no test). Full e2e run ALL PASSED, 1574 checks.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/core/model/playSettings.ts

@@ -12,7 +12,7 @@ export const DEFAULT_PLAY_FROM: PlayFrom = 'start';
 /** How the game view sizes the camera frame: a fixed factor, the largest step that fits, or fitted. */
 export type GameScale = 'auto' | 'fit' | number;
 
-export const GAME_SCALE_STEPS = [0.25, 0.5, 1, 2, 4];
+export const GAME_SCALE_STEPS = [0.25, 0.5, 1, 2, 3, 4, 5, 6];
 
 export const DEFAULT_GAME_SCALE: GameScale = 1;
 

src/player/GameScreen.ts

@@ -1,4 +1,4 @@
-import { Text } from 'pixi.js';
+import { Text, type TextStyle } from 'pixi.js';
 import type { World } from '../runtime/World';
 import { Theme, textStyle, ui } from '../ui';
 import { cameraOfWorld } from '../viewport/activeCamera';
@@ -12,8 +12,16 @@ import { type Frame, type ViewSource, WorldViewport } from '../viewport/WorldVie
  * zoom step that fits (Auto), letterboxed in the page colour. Before the game runs, and after it
  * stopped itself, it shows a line of text instead – "Click to play", or why there is nothing to play.
  */
+
+function captionStyle(): TextStyle {
+  const style = textStyle('title').clone();
+  style.fontSize = Theme.captionSize;
+  style.letterSpacing = 1;
+  return style;
+}
+
 export class GameScreen extends WorldViewport {
-  private readonly caption = new Text({ text: '', style: textStyle('title') });
+  private readonly caption = new Text({ text: '', style: captionStyle() });
   private readonly hint = new Text({ text: 'No active camera', style: textStyle('muted') });
   private running: World | null = null;
   /** Asked when the caption is clicked while it offers to start. */
@@ -41,7 +49,6 @@ export class GameScreen extends WorldViewport {
   say(text: string, startable = false): void {
     this.caption.text = text;
     this.startable = startable;
-    this.cursor = startable ? 'pointer' : 'default';
     this.redraw();
   }
 
@@ -61,6 +68,8 @@ export class GameScreen extends WorldViewport {
    */
   info(): {
     caption: string | null;
+    /** How tall the caption is drawn, in CSS pixels. */
+    captionHeight: number;
     scale: number | null;
     frame: { x: number; y: number; w: number; h: number } | null;
   } {
@@ -68,6 +77,7 @@ export class GameScreen extends WorldViewport {
     const origin = this.getGlobalPosition();
     return {
       caption: this.running ? null : this.caption.text,
+      captionHeight: Math.round(this.caption.height),
       scale: view?.scale ?? null,
       frame: view ? { ...view.rect, x: origin.x + view.rect.x, y: origin.y + view.rect.y } : null,
     };

src/ui/Theme.ts

@@ -8,6 +8,7 @@ export const Theme = {
   fontSize: 13,
   smallFontSize: 11,
   viewportLabelSize: 10,
+  captionSize: 16,
   rowHeight: 24,
   controlHeight: 24,
   padding: 8,