refactor(onitama): centralize visual constants in config

Introduce `TEXT_POSITION` and `VISUAL` objects to the configuration
to manage magic numbers for positioning, radii, stroke widths, and
alphas. Update renderers and spawners to use these constants instead
of hardcoded values or direct calculations.

packages/onitama-game/src/renderers/CardRenderer.ts

@@ -1,7 +1,14 @@
 import type { Card } from "@/game/onitama";
 import type { OnitamaScene } from "@/scenes/OnitamaScene";
 
-import { CARD_WIDTH, CARD_HEIGHT, COLORS, FONTS, CARD_GRID } from "@/config";
+import {
+  CARD_WIDTH,
+  CARD_HEIGHT,
+  COLORS,
+  FONTS,
+  CARD_GRID,
+  VISUAL,
+} from "@/config";
 
 export interface CardRenderOptions {
   card: Card;
@@ -28,12 +35,17 @@ export class CardRenderer {
     // Create background rectangle
     const bg = this.scene.add
       .rectangle(0, 0, CARD_WIDTH, CARD_HEIGHT, COLORS.cardBg, 1)
-      .setStrokeStyle(2, COLORS.cardStroke);
+      .setStrokeStyle(VISUAL.cardStrokeWidth, COLORS.cardStroke);
     container.add(bg);
 
     // Create title text
     const title = this.scene.add
-      .text(0, -CARD_HEIGHT / 2 + 16, card.id, FONTS.cardTitle)
+      .text(
+        0,
+        -CARD_HEIGHT / 2 + VISUAL.cardTitleOffset,
+        card.id,
+        FONTS.cardTitle,
+      )
       .setOrigin(0.5);
     container.add(title);
 
@@ -42,7 +54,12 @@ export class CardRenderer {
 
     // Create starting player text
     const playerText = this.scene.add
-      .text(0, CARD_HEIGHT / 2 - 16, card.startingPlayer, FONTS.cardPlayer)
+      .text(
+        0,
+        CARD_HEIGHT / 2 - VISUAL.cardPlayerOffset,
+        card.startingPlayer,
+        FONTS.cardPlayer,
+      )
       .setOrigin(0.5);
     container.add(playerText);
   }

packages/onitama-game/src/renderers/HighlightRenderer.ts

@@ -1,8 +1,8 @@
 import type { OnitamaScene } from "@/scenes/OnitamaScene";
 
 import {
-  CELL_SIZE,
   COLORS,
+  VISUAL,
   createHighlightInnerPulseTween,
   createHighlightOuterPulseTween,
 } from "@/config";
@@ -37,7 +37,7 @@ export class HighlightRenderer {
     const outerCircle = this.scene.add.circle(
       0,
       0,
-      CELL_SIZE / 3,
+      VISUAL.highlightOuterRadius,
       COLORS.black,
       0.2,
     );
@@ -47,7 +47,7 @@ export class HighlightRenderer {
     const innerCircle = this.scene.add.circle(
       0,
       0,
-      CELL_SIZE / 4,
+      VISUAL.highlightInnerRadius,
       COLORS.black,
       0.4,
     );

packages/onitama-game/src/renderers/PawnRenderer.ts

@@ -1,6 +1,6 @@
 import type { OnitamaScene } from "@/scenes/OnitamaScene";
 
-import { CELL_SIZE, COLORS, FONTS } from "@/config";
+import { CELL_SIZE, COLORS, FONTS, VISUAL } from "@/config";
 
 export type PawnType = "master" | "student";
 export type PawnOwner = "red" | "black";
@@ -31,8 +31,8 @@ export class PawnRenderer {
     // Create background circle
     const bgColor = owner === "red" ? COLORS.red : COLORS.black;
     const circle = this.scene.add
-      .circle(0, 0, CELL_SIZE / 3, bgColor, 1)
-      .setStrokeStyle(2, COLORS.pawnStroke);
+      .circle(0, 0, VISUAL.pawnRadius, bgColor, 1)
+      .setStrokeStyle(VISUAL.pawnStrokeWidth, COLORS.pawnStroke);
     container.add(circle);
 
     // Create label text

packages/onitama-game/src/renderers/SelectionRenderer.ts

@@ -5,6 +5,7 @@ import type { OnitamaScene } from "@/scenes/OnitamaScene";
 import {
   CELL_SIZE,
   COLORS,
+  VISUAL,
   createSelectionShowTween,
   createSelectionRingPulseTween,
   createSelectionHideTween,
@@ -31,8 +32,21 @@ export class SelectionRenderer {
     parent: Phaser.GameObjects.Container | Phaser.GameObjects.GameObject,
   ): Phaser.GameObjects.Arc {
     const ring = this.scene.add
-      .arc(0, 0, CELL_SIZE / 3 + 5, 0, 360, false, COLORS.highlight, 0)
-      .setStrokeStyle(3, COLORS.highlightStroke, 1)
+      .arc(
+        0,
+        0,
+        VISUAL.pawnRadius + VISUAL.selectionRingOffset,
+        0,
+        360,
+        false,
+        COLORS.highlight,
+        0,
+      )
+      .setStrokeStyle(
+        VISUAL.selectionRingStrokeWidth,
+        COLORS.highlightStroke,
+        1,
+      )
       .setAlpha(0);
 
     // Add to parent at index 0 (behind other visuals)