diff --git a/example-games/feudalism/scenes/FeudalismRenderer.ts b/example-games/feudalism/scenes/FeudalismRenderer.ts
index 44049a5d..9ff9ebd4 100644
--- a/example-games/feudalism/scenes/FeudalismRenderer.ts
+++ b/example-games/feudalism/scenes/FeudalismRenderer.ts
@@ -34,6 +34,7 @@ import {
   getBonusRenderOrder,
   getTokenRenderOrder,
 } from './FeudalismRenderHelpers';
+import { createFeudalismActionButton } from '../../../src/ui/Renderer/adapters/FeudalismAdapter';
 
 export interface MarketCallbacks {
   onMarketCardClick: (card: DevelopmentCard) => void;
@@ -714,7 +715,7 @@ export class FeudalismRenderer {
       if (availSame.length > 0) totalW += 30 + 80 + availSame.length * 54;
       let bx = centerX - totalW / 2;
 
-      const takeBtn = this.createActionButton(bx, by, 'Take Tokens', () => callbacks.onTakeTokens());
+      const takeBtn = createFeudalismActionButton(this.scene, bx, by, 'Take Tokens', () => callbacks.onTakeTokens());
       this.actionContainer.add(takeBtn);
       bx += 185;
 
@@ -756,37 +757,16 @@ export class FeudalismRenderer {
       bx += 290;
 
       if (canConfirm) {
-        const confirmBtn = this.createActionButton(bx, by, 'Confirm', () => callbacks.onConfirmDifferent());
+        const confirmBtn = createFeudalismActionButton(this.scene, bx, by, 'Confirm', () => callbacks.onConfirmDifferent());
         this.actionContainer.add(confirmBtn);
         bx += 155;
       }
 
-      const cancelBtn = this.createActionButton(bx, by, 'Cancel', () => callbacks.onCancelSelection());
+      const cancelBtn = createFeudalismActionButton(this.scene, bx, by, 'Cancel', () => callbacks.onCancelSelection());
       this.actionContainer.add(cancelBtn);
     }
   }
 
-  private createActionButton(x: number, y: number, text: string, callback: () => void): Phaser.GameObjects.Container {
-    const btnW = 155;
-    const btnH = 42;
-    const container = this.scene.add.container(x + btnW / 2, y);
-    const bg = this.scene.add.rectangle(0, 0, btnW, btnH, 0x335533, 0.8);
-    bg.setStrokeStyle(1, 0x55aa55);
-    container.add(bg);
-
-    const label = this.scene.add.text(0, 0, text, {
-      fontSize: '17px', fontStyle: 'bold', color: '#88ff88', fontFamily: FONT_FAMILY,
-    }).setOrigin(0.5);
-    container.add(label);
-
-    bg.setInteractive({ useHandCursor: true });
-    bg.on('pointerdown', callback);
-    bg.on('pointerover', () => bg.setStrokeStyle(2, 0xffdd44));
-    bg.on('pointerout', () => bg.setStrokeStyle(1, 0x55aa55));
-
-    return container;
-  }
-
   private isValidTokenSelection(): boolean {
     if (this.selectedTokens.length === 0) return false;
     if (new Set(this.selectedTokens).size !== this.selectedTokens.length) return false;
diff --git a/example-games/gym/scenes/GymAudioFeedbackScene.ts b/example-games/gym/scenes/GymAudioFeedbackScene.ts
index 248e4c94..bf57b96b 100644
--- a/example-games/gym/scenes/GymAudioFeedbackScene.ts
+++ b/example-games/gym/scenes/GymAudioFeedbackScene.ts
@@ -23,6 +23,7 @@ import {
 import type { SoundPlayer, EventSoundMapping } from '../../../src/core-engine';
 import { popTextOrIcon } from '../../../src/ui/popTextOrIcon';
 import { GAME_W } from '../../../src/ui/constants';
+import { createHudText } from '../../../src/ui/Renderer';
 
 /** A stub SoundPlayer that records play calls instead of producing audio. */
 class StubSoundPlayer implements SoundPlayer {
@@ -132,14 +133,10 @@ export class GymAudioFeedbackScene extends GymSceneBase {
     this.addButton(cx + 220, y, '[ Celebrate ]', () => this.triggerCelebration());
 
     y += 50;
-    this.statusText = this.add.text(cx, y, this.statusString(), {
-      fontSize: '16px',
-      color: '#ffffff',
-      fontFamily: 'monospace',
-    }).setOrigin(0.5);
+    this.statusText = createHudText(this, cx, y, this.statusString(), '#ffffff', { fontSize: '16px' }).setOrigin(0.5);
 
     y += 30;
-    this.addLabel(cx, y, '── Sound Call Log ──', { fontSize: '12px', color: '#669966' }).setOrigin(0.5);
+    createHudText(this, cx, y, '── Sound Call Log ──', '#669966', { fontSize: '12px' }).setOrigin(0.5);
   }
 
   private statusString(): string {
@@ -296,11 +293,7 @@ export class GymAudioFeedbackScene extends GymSceneBase {
     this.callLogTexts = [];
     const baseY = 250;
     for (let i = 0; i < this.callLog.length; i++) {
-      const txt = this.add.text(40, baseY + i * 17, this.callLog[i], {
-        fontSize: '11px',
-        color: '#aaddaa',
-        fontFamily: 'monospace',
-      });
+      const txt = createHudText(this, 40, baseY + i * 17, this.callLog[i], '#aaddaa', { fontSize: '11px' });
       this.callLogTexts.push(txt);
     }
   }
diff --git a/example-games/gym/scenes/GymDeckRngScene.ts b/example-games/gym/scenes/GymDeckRngScene.ts
index ec87987b..6ada0442 100644
--- a/example-games/gym/scenes/GymDeckRngScene.ts
+++ b/example-games/gym/scenes/GymDeckRngScene.ts
@@ -18,6 +18,7 @@ import type { Card } from '../../../src/card-system/Card';
 import { createSeededRng } from '../../../src/core-engine/SeededRng';
 import { GAME_W, CARD_W, CARD_H } from '../../../src/ui/constants';
 import { preloadCardAssets, getCardTexture, ensureCardTextureFallbacks } from '../../../src/ui/CardTextureHelpers';
+import { createHudText } from '../../../src/ui/Renderer';
 
 /** Default seed for deterministic demonstrations. */
 const DEFAULT_SEED = 42;
@@ -78,11 +79,7 @@ export class GymDeckRngScene extends GymSceneBase {
     let y = controlsAnchor?.y ?? 60;
 
     this.addLabel(cx, y, 'Seed:');
-    this.seedText = this.add.text(cx + 50, y, String(this.seed), {
-      fontSize: '16px',
-      color: '#ffffff',
-      fontFamily: 'monospace',
-    });
+    this.seedText = createHudText(this, cx + 50, y, String(this.seed), '#ffffff', { fontSize: '16px' });
 
     this.addButton(cx + 180, y, '[ -1 ]', () => this.adjustSeed(-1));
     this.addButton(cx + 240, y, '[ +1 ]', () => this.adjustSeed(1));
@@ -94,7 +91,7 @@ export class GymDeckRngScene extends GymSceneBase {
     });
 
     // ── Status ───────────────────────────────────────────
-    this.statusText = this.addLabel(cx + 600, y, '52 cards displayed', { fontSize: '16px', color: '#88ff88' });
+    this.statusText = createHudText(this, cx + 600, y, '52 cards displayed', '#88ff88', { fontSize: '16px' });
 
     // ── Initialize deck, shuffle with default seed, and render ──
     this.seed = DEFAULT_SEED;
diff --git a/example-games/gym/scenes/GymGraphicsLightingSpikeScene.ts b/example-games/gym/scenes/GymGraphicsLightingSpikeScene.ts
index 51545464..28ba8e1d 100644
--- a/example-games/gym/scenes/GymGraphicsLightingSpikeScene.ts
+++ b/example-games/gym/scenes/GymGraphicsLightingSpikeScene.ts
@@ -16,6 +16,7 @@
 
 import { GymSceneBase } from './GymSceneBase';
 import { GAME_W } from '../../../src/ui/constants';
+import { createHudText } from '../../../src/ui/Renderer';
 
 export const GYM_GRAPHICS_LIGHTING_SPIKE_KEY = 'GymGraphicsLightingSpikeScene';
 
@@ -101,16 +102,14 @@ export class GymGraphicsLightingSpikeScene extends GymSceneBase {
       // Show fallback sprites without lighting
       this.add.image(cx - 150, y + 120, 'lighting-sprite-a');
       this.add.image(cx + 150, y + 120, 'lighting-sprite-b');
-      this.add.text(cx, y + 120, 'Lighting unavailable\n(showing fallback sprites)', {
+      createHudText(this, cx, y + 120, 'Lighting unavailable\n(showing fallback sprites)', '#ff8844', {
         fontSize: '12px',
-        color: '#ff8844',
-        fontFamily: 'monospace',
         align: 'center',
       }).setOrigin(0.5);
     }
 
     y += 260;
-    this.addLabel(cx, y, '── Findings & Event Log ──', { fontSize: '12px', color: '#669966' }).setOrigin(0.5);
+    createHudText(this, cx, y, '── Findings & Event Log ──', '#669966', { fontSize: '12px' }).setOrigin(0.5);
 
     // Record findings
     this.logEvent('--- Lighting Spike Findings ---');
@@ -170,11 +169,7 @@ export class GymGraphicsLightingSpikeScene extends GymSceneBase {
     this.logTexts = [];
     const baseY = 370;
     for (let i = 0; i < this.eventLog.length; i++) {
-      const txt = this.add.text(20, baseY + i * 16, this.eventLog[i], {
-        fontSize: '10px',
-        color: '#aaddaa',
-        fontFamily: 'monospace',
-      });
+      const txt = createHudText(this, 20, baseY + i * 16, this.eventLog[i], '#aaddaa', { fontSize: '10px' });
       this.logTexts.push(txt);
     }
   }
diff --git a/example-games/gym/scenes/GymGraphicsShaderSpikeScene.ts b/example-games/gym/scenes/GymGraphicsShaderSpikeScene.ts
index a5057d3f..82309259 100644
--- a/example-games/gym/scenes/GymGraphicsShaderSpikeScene.ts
+++ b/example-games/gym/scenes/GymGraphicsShaderSpikeScene.ts
@@ -15,6 +15,7 @@
 
 import { GymSceneBase } from './GymSceneBase';
 import { GAME_W } from '../../../src/ui/constants';
+import { createHudText } from '../../../src/ui/Renderer';
 
 /** The scene key must match the registration in GymRegistry. */
 export const GYM_GRAPHICS_SHADER_SPIKE_KEY = 'GymGraphicsShaderSpikeScene';
@@ -113,7 +114,7 @@ export class GymGraphicsShaderSpikeScene extends GymSceneBase {
     this.addButton(cx + 120, y, '[ Attempt Shader ]', () => this.attemptShader());
 
     y += 30;
-    this.addLabel(cx, y, 'Blend: NORMAL | Tint: None', { fontSize: '12px', color: '#88ff88' }).setOrigin(0.5);
+    createHudText(this, cx, y, 'Blend: NORMAL | Tint: None', '#88ff88', { fontSize: '12px' }).setOrigin(0.5);
 
     y += 30;
     // Create sample sprites
@@ -125,7 +126,7 @@ export class GymGraphicsShaderSpikeScene extends GymSceneBase {
     }
 
     y += 200;
-    this.addLabel(cx, y, '── Event Log ──', { fontSize: '12px', color: '#669966' }).setOrigin(0.5);
+    createHudText(this, cx, y, '── Event Log ──', '#669966', { fontSize: '12px' }).setOrigin(0.5);
   }
 
   private cycleTint(): void {
@@ -198,11 +199,7 @@ export class GymGraphicsShaderSpikeScene extends GymSceneBase {
     this.logTexts = [];
     const baseY = 280;
     for (let i = 0; i < this.eventLog.length; i++) {
-      const txt = this.add.text(40, baseY + i * 17, this.eventLog[i], {
-        fontSize: '11px',
-        color: '#aaddaa',
-        fontFamily: 'monospace',
-      });
+      const txt = createHudText(this, 40, baseY + i * 17, this.eventLog[i], '#aaddaa', { fontSize: '11px' });
       this.logTexts.push(txt);
     }
   }
diff --git a/example-games/gym/scenes/GymHandPileScene.ts b/example-games/gym/scenes/GymHandPileScene.ts
index b8d7c4ab..cb9c771f 100644
--- a/example-games/gym/scenes/GymHandPileScene.ts
+++ b/example-games/gym/scenes/GymHandPileScene.ts
@@ -32,6 +32,7 @@ import { moveGameObject } from '../../../src/ui/moveGameObject';
 import { shakeIllegalMove } from '../../../src/ui/shakeIllegalMove';
 import { CARD_H, CARD_W, GAME_H, GAME_W } from '../../../src/ui/constants';
 import { getCardTexture, ensureCardTextureFallbacks, preloadCardAssets } from '../../../src/ui/CardTextureHelpers';
+import { createHudText } from '../../../src/ui/Renderer';
 import type { Card } from '../../../src/card-system/Card';
 
 const HAND_SIZE = 5;
@@ -185,7 +186,7 @@ export class GymHandPileScene extends GymSceneBase {
     this.addButton(cx + 180, y, '[ Reset ]', () => this.reset());
 
     y += 35;
-    this.addLabel(cx, y, '── Event Log ──', { fontSize: '12px', color: '#669966' }).setOrigin(0.5);
+    createHudText(this, cx, y, '── Event Log ──', '#669966', { fontSize: '12px' }).setOrigin(0.5);
 
     this.createArcRadiusSlider();
     this.createSpacingSlider();
@@ -206,11 +207,7 @@ export class GymHandPileScene extends GymSceneBase {
 
     this.arcSliderHandle = this.add.graphics();
 
-    this.arcSliderValueText = this.add.text(0, sliderY - 20, '', {
-      fontSize: '11px',
-      color: '#88ff88',
-      fontFamily: 'monospace',
-    }).setOrigin(0.5);
+    this.arcSliderValueText = createHudText(this, 0, sliderY - 20, '', '#88ff88', { fontSize: '11px' }).setOrigin(0.5);
 
     this.arcSliderHitArea = this.add.zone(0, sliderY, this.ARC_SLIDER_WIDTH + 24, 28)
       .setInteractive({ useHandCursor: true });
@@ -308,11 +305,7 @@ export class GymHandPileScene extends GymSceneBase {
 
     this.spacingSliderHandle = this.add.graphics();
 
-    this.spacingSliderValueText = this.add.text(0, sliderY - 20, '', {
-      fontSize: '11px',
-      color: '#88ff88',
-      fontFamily: 'monospace',
-    }).setOrigin(0.5);
+    this.spacingSliderValueText = createHudText(this, 0, sliderY - 20, '', '#88ff88', { fontSize: '11px' }).setOrigin(0.5);
 
     this.spacingSliderHitArea = this.add.zone(0, sliderY, this.ARC_SLIDER_WIDTH + 24, 28)
       .setInteractive({ useHandCursor: true });
@@ -416,11 +409,7 @@ export class GymHandPileScene extends GymSceneBase {
 
     this.rotationSliderHandle = this.add.graphics();
 
-    this.rotationSliderValueText = this.add.text(0, sliderY - 20, '', {
-      fontSize: '11px',
-      color: '#88ff88',
-      fontFamily: 'monospace',
-    }).setOrigin(0.5);
+    this.rotationSliderValueText = createHudText(this, 0, sliderY - 20, '', '#88ff88', { fontSize: '11px' }).setOrigin(0.5);
 
     this.rotationSliderHitArea = this.add.zone(0, sliderY, this.ARC_SLIDER_WIDTH + 24, 28)
       .setInteractive({ useHandCursor: true });
@@ -890,11 +879,7 @@ export class GymHandPileScene extends GymSceneBase {
     this.logTexts = [];
     const baseY = 230;
     for (let i = 0; i < this.eventLog.length; i++) {
-      const txt = this.add.text(40, baseY + i * 17, this.eventLog[i], {
-        fontSize: '11px',
-        color: '#aaddaa',
-        fontFamily: 'monospace',
-      });
+      const txt = createHudText(this, 40, baseY + i * 17, this.eventLog[i], '#aaddaa', { fontSize: '11px' });
       this.logTexts.push(txt);
     }
   }
diff --git a/example-games/gym/scenes/GymOverlayUiScene.ts b/example-games/gym/scenes/GymOverlayUiScene.ts
index 9e4e1abb..e5fe5375 100644
--- a/example-games/gym/scenes/GymOverlayUiScene.ts
+++ b/example-games/gym/scenes/GymOverlayUiScene.ts
@@ -17,6 +17,7 @@ import { GymSceneBase } from './GymSceneBase';
 import { GYM_OVERLAY_UI_KEY } from '../GymRegistry';
 import { GAME_W } from '../../../src/ui/constants';
 import { createOverlayBackground, dismissOverlay } from '../../../src/ui/Overlay';
+import { createHudText } from '../../../src/ui/Renderer';
 
 export class GymOverlayUiScene extends GymSceneBase {
   private overlayObjects: Phaser.GameObjects.GameObject[] | null = null;
@@ -65,11 +66,11 @@ export class GymOverlayUiScene extends GymSceneBase {
     this.addButton(cx + 260, y, '[ Intensity + ]', () => this.adjustIntensity(0.2));
 
     y += 40;
-    this.intensityText = this.addLabel(cx, y, 'Feedback Intensity: 1.0', { fontSize: '16px', color: '#88ff88' });
+    this.intensityText = createHudText(this, cx, y, 'Feedback Intensity: 1.0', '#88ff88', { fontSize: '16px' });
     this.intensityText.setOrigin(0.5);
 
     y += 30;
-    this.addLabel(cx, y, '── Event Log ──', { fontSize: '12px', color: '#669966' }).setOrigin(0.5);
+    createHudText(this, cx, y, '── Event Log ──', '#669966', { fontSize: '12px' }).setOrigin(0.5);
   }
 
   private openOverlay(): void {
@@ -131,11 +132,7 @@ export class GymOverlayUiScene extends GymSceneBase {
         'overlay brightness.',
       ];
       for (let i = 0; i < contentLines.length; i++) {
-        const line = this.add.text(10, i * 16, contentLines[i], {
-          fontSize: '12px',
-          color: '#ccddcc',
-          fontFamily: 'monospace',
-        });
+        const line = createHudText(this, 10, i * 16, contentLines[i], '#ccddcc', { fontSize: '12px' });
         this.maskedContainer.add(line);
       }
       this.logEvent('Overlay opened with GeometryMask content area');
@@ -145,21 +142,20 @@ export class GymOverlayUiScene extends GymSceneBase {
     }
 
     // Add central content text (above the mask)
-    const info = this.add.text(
+    const info = createHudText(
+      this,
       GAME_W / 2,
       240,
       'Overlay Active\nScrollable content below.',
-      { fontSize: '16px', color: '#ffffff', fontFamily: 'monospace', align: 'center' },
+      '#ffffff',
+      { fontSize: '16px', align: 'center' },
     ).setOrigin(0.5);
     info.setDepth(11);
     this.overlayObjects.push(info);
 
     // Dismiss link
-    const dismiss = this.add.text(GAME_W / 2, 520, '[ Dismiss Overlay ]', {
+    const dismiss = createHudText(this, GAME_W / 2, 520, '[ Dismiss Overlay ]', '#88ff88', {
       fontSize: '14px',
-      color: '#88ff88',
-      fontFamily: 'monospace',
-      fontStyle: 'bold',
     }).setOrigin(0.5).setInteractive({ useHandCursor: true });
     dismiss.on('pointerdown', () => {
       this.markOverlayInteraction();
@@ -169,17 +165,17 @@ export class GymOverlayUiScene extends GymSceneBase {
     this.overlayObjects.push(dismiss);
 
     // Intensity controls within overlay
-    const minus = this.add.text(GAME_W / 2 - 80, 550, '[-]', { fontSize: '14px', color: '#ff8877', fontFamily: 'monospace' }).setOrigin(0.5).setInteractive({ useHandCursor: true });
+    const minus = createHudText(this, GAME_W / 2 - 80, 550, '[-]', '#ff8877', { fontSize: '14px' }).setOrigin(0.5).setInteractive({ useHandCursor: true });
     minus.on('pointerdown', () => { this.markOverlayInteraction(); this.adjustIntensity(-0.2); });
     minus.setDepth(11);
     this.overlayObjects.push(minus);
 
-    const intensityLabel = this.add.text(GAME_W / 2, 550, `Intensity: ${this.feedbackIntensity}`, { fontSize: '14px', color: '#ffffff', fontFamily: 'monospace' }).setOrigin(0.5);
+    const intensityLabel = createHudText(this, GAME_W / 2, 550, `Intensity: ${this.feedbackIntensity}`, '#ffffff', { fontSize: '14px' }).setOrigin(0.5);
     intensityLabel.setDepth(11);
     this.overlayObjects.push(intensityLabel);
     this.overlayIntensityText = intensityLabel;
 
-    const plus = this.add.text(GAME_W / 2 + 80, 550, '[+]', { fontSize: '14px', color: '#77ff88', fontFamily: 'monospace' }).setOrigin(0.5).setInteractive({ useHandCursor: true });
+    const plus = createHudText(this, GAME_W / 2 + 80, 550, '[+]', '#77ff88', { fontSize: '14px' }).setOrigin(0.5).setInteractive({ useHandCursor: true });
     plus.on('pointerdown', () => { this.markOverlayInteraction(); this.adjustIntensity(0.2); });
     plus.setDepth(11);
     this.overlayObjects.push(plus);
@@ -276,11 +272,7 @@ export class GymOverlayUiScene extends GymSceneBase {
     this.logTexts = [];
     const baseY = 150;
     for (let i = 0; i < this.eventLog.length; i++) {
-      const txt = this.add.text(40, baseY + i * 17, this.eventLog[i], {
-        fontSize: '11px',
-        color: '#aaddaa',
-        fontFamily: 'monospace',
-      });
+      const txt = createHudText(this, 40, baseY + i * 17, this.eventLog[i], '#aaddaa', { fontSize: '11px' });
       this.logTexts.push(txt);
     }
   }
diff --git a/example-games/gym/scenes/GymRouterScene.ts b/example-games/gym/scenes/GymRouterScene.ts
index d09c73e6..70dc7b99 100644
--- a/example-games/gym/scenes/GymRouterScene.ts
+++ b/example-games/gym/scenes/GymRouterScene.ts
@@ -18,10 +18,10 @@ import { createSceneMenuButton } from '../../../src/ui/SceneHeader';
 import { runSceneTransition } from '../../../src/ui/sceneTransition';
 import { GYM_ROUTER_KEY, GYM_SCENE_CATALOGUE } from '../GymRegistry';
 import type { GymSceneEntry } from '../GymRegistry';
+import { createHudText } from '../../../src/ui/Renderer';
 
 // ── Layout constants ───────────────────────────────────────
 
-const FONT_FAMILY = 'monospace';
 const CARD_W = 320;
 const CARD_H = 120;
 const CARD_GAP = 16;
@@ -53,32 +53,13 @@ export class GymRouterScene extends Phaser.Scene {
     createSceneMenuButton(this);
 
     // Title
-    this.add
-      .text(GAME_W / 2, 24, 'TCE Gym', {
-        fontSize: '28px',
-        color: '#88ff88',
-        fontFamily: FONT_FAMILY,
-        fontStyle: 'bold',
-      })
-      .setOrigin(0.5);
+    createHudText(this, GAME_W / 2, 24, 'TCE Gym', '#88ff88', { fontSize: '28px' }).setOrigin(0.5);
 
     // Subtitle
-    this.add
-      .text(GAME_W / 2, 52, 'Select a scene to explore core-engine features', {
-        fontSize: '13px',
-        color: '#669966',
-        fontFamily: FONT_FAMILY,
-      })
-      .setOrigin(0.5);
+    createHudText(this, GAME_W / 2, 52, 'Select a scene to explore core-engine features', '#669966', { fontSize: '13px' }).setOrigin(0.5);
 
     // Transition toggle button
-    const toggleBtn = this.add
-      .text(GAME_W - 20, 10, `Transitions: ${animateTransitions ? 'ON' : 'OFF'}`, {
-        fontSize: '10px',
-        color: animateTransitions ? '#88ff88' : '#666666',
-        fontFamily: FONT_FAMILY,
-      })
-      .setOrigin(1, 0)
+    const toggleBtn = createHudText(this, GAME_W - 20, 10, `Transitions: ${animateTransitions ? 'ON' : 'OFF'}`, animateTransitions ? '#88ff88' : '#666666', { fontSize: '10px', originX: 1, originY: 0 })
       .setInteractive({ useHandCursor: true });
     toggleBtn.on('pointerdown', () => {
       animateTransitions = !animateTransitions;
@@ -147,26 +128,11 @@ export class GymRouterScene extends Phaser.Scene {
     this.drawCard(bg, x, y, cardW, cardH, CARD_BG, CARD_BORDER);
 
     // Title
-    const title = this.add
-      .text(x, y - cardH / 2 + 18, entry.title, {
-        fontSize: '15px',
-        color: '#ffffff',
-        fontFamily: FONT_FAMILY,
-        fontStyle: 'bold',
-      })
-      .setOrigin(0.5);
+    const title = createHudText(this, x, y - cardH / 2 + 18, entry.title, '#ffffff', { fontSize: '15px' }).setOrigin(0.5);
 
     // Description
-    const desc = this.add
-      .text(x, y + 6, entry.description, {
-        fontSize: '10px',
-        color: '#aaddaa',
-        fontFamily: FONT_FAMILY,
-        align: 'center',
-        wordWrap: { width: cardW - 24 },
-        lineSpacing: 2,
-      })
-      .setOrigin(0.5);
+    const desc = createHudText(this, x, y + 6, entry.description, '#aaddaa', { fontSize: '10px', align: 'center', lineSpacing: 2 }).setOrigin(0.5);
+    desc.setWordWrapWidth(cardW - 24);
 
     // Crop description overflow
     const maxDescH = cardH - 60;
@@ -175,14 +141,7 @@ export class GymRouterScene extends Phaser.Scene {
     }
 
     // "[ Open ]" button label
-    const openLabel = this.add
-      .text(x, y + cardH / 2 - 16, '[ Open ]', {
-        fontSize: '13px',
-        color: '#88ff88',
-        fontFamily: FONT_FAMILY,
-        fontStyle: 'bold',
-      })
-      .setOrigin(0.5);
+    const openLabel = createHudText(this, x, y + cardH / 2 - 16, '[ Open ]', '#88ff88', { fontSize: '13px' }).setOrigin(0.5);
 
     // Interactive hit area
     const hitZone = this.add
diff --git a/example-games/gym/scenes/GymSaveLoadScene.ts b/example-games/gym/scenes/GymSaveLoadScene.ts
index 6763208f..a440a5bb 100644
--- a/example-games/gym/scenes/GymSaveLoadScene.ts
+++ b/example-games/gym/scenes/GymSaveLoadScene.ts
@@ -19,6 +19,7 @@ import {
 } from '../../../src/core-engine';
 import type { SaveSerializer } from '../../../src/core-engine';
 import { GAME_W } from '../../../src/ui/constants';
+import { createHudText } from '../../../src/ui/Renderer';
 
 /** Simple state for this demo. */
 interface DemoState {
@@ -90,18 +91,14 @@ export class GymSaveLoadScene extends GymSceneBase {
 
     y += 40;
     try {
-      this.stateText = this.add.text(cx, y, this.stateString(), {
-        fontSize: '18px',
-        color: '#ffffff',
-        fontFamily: 'monospace',
-      }).setOrigin(0.5);
+      this.stateText = createHudText(this, cx, y, this.stateString(), '#ffffff', { fontSize: '18px' }).setOrigin(0.5);
     } catch (e) {
       // Fallback to label if text texture creation fails in some headless environments
       this.stateText = this.addLabel(cx, y, this.stateString(), { fontSize: '18px', color: '#ffffff' }).setOrigin(0.5);
     }
 
     y += 30;
-    this.backendText = this.addLabel(cx, y, 'Storage: checking...', { fontSize: '12px', color: '#888888' });
+    this.backendText = createHudText(this, cx, y, 'Storage: checking...', '#888888', { fontSize: '12px' });
     this.backendText.setOrigin(0.5);
 
     // Check backend
@@ -114,7 +111,7 @@ export class GymSaveLoadScene extends GymSceneBase {
 
     y += 20;
     if (this.sys && this.sys.isActive && this.sys.isActive()) {
-      this.addLabel(cx, y, '── Event Log ──', { fontSize: '12px', color: '#669966' }).setOrigin(0.5);
+      createHudText(this, cx, y, '── Event Log ──', '#669966', { fontSize: '12px' }).setOrigin(0.5);
     }
   }
 
@@ -246,11 +243,7 @@ export class GymSaveLoadScene extends GymSceneBase {
       // Headless/non-canvas environments: show textual placeholder
       this.logEvent(`Snapshot fallback (headless): ${(e as Error).message?.substring(0, 50) ?? 'RenderTexture unavailable'}`);
       // Show a textual placeholder instead
-      const placeholder = this.add.text(GAME_W / 2, 340, '[ Snapshot: Text Placeholder ]', {
-        fontSize: '12px',
-        color: '#888888',
-        fontFamily: 'monospace',
-      }).setOrigin(0.5);
+      const placeholder = createHudText(this, GAME_W / 2, 340, '[ Snapshot: Text Placeholder ]', '#888888', { fontSize: '12px' }).setOrigin(0.5);
       this.logTexts.push(placeholder);
       this._snapshotAvailable = false;
     }
@@ -272,18 +265,14 @@ export class GymSaveLoadScene extends GymSceneBase {
     this.logTexts = [];
     const baseY = 170;
     for (let i = 0; i < this.eventLog.length; i++) {
-      let txt: Phaser.GameObjects.Text;
       try {
-        txt = this.add.text(40, baseY + i * 17, this.eventLog[i], {
-          fontSize: '11px',
-          color: '#aaddaa',
-          fontFamily: 'monospace',
-        });
+        const txt = createHudText(this, 40, baseY + i * 17, this.eventLog[i], '#aaddaa', { fontSize: '11px' });
+        this.logTexts.push(txt);
       } catch (e) {
         // Fallback to label if text texture creation fails
-        txt = this.addLabel(40, baseY + i * 17, this.eventLog[i], { fontSize: '11px', color: '#aaddaa' });
+        const txt = this.addLabel(40, baseY + i * 17, this.eventLog[i], { fontSize: '11px', color: '#aaddaa' });
+        this.logTexts.push(txt);
       }
-      this.logTexts.push(txt);
     }
   }
 }
\ No newline at end of file
diff --git a/example-games/gym/scenes/GymSceneBase.ts b/example-games/gym/scenes/GymSceneBase.ts
index 8fdc9949..879ca4c2 100644
--- a/example-games/gym/scenes/GymSceneBase.ts
+++ b/example-games/gym/scenes/GymSceneBase.ts
@@ -23,6 +23,7 @@ import { runSceneTransition } from '../../../src/ui/sceneTransition';
 import { getZoneRect, anchorPoint } from '../../../src/ui/screen-layout';
 import { parseScreenLayoutDocument, type ScreenLayoutDocument, type PixelPoint } from '../../../src/ui/screen-layout-schema';
 import gymScenesLayoutJson from '../layouts/gym-scenes.layout.json';
+import { createHudText } from '../../../src/ui/Renderer';
 
 // Parse the shared Gym scenes layout once at module load.
 const GYM_SCENES_LAYOUT: ScreenLayoutDocument | null = (() => {
@@ -155,6 +156,7 @@ export abstract class GymSceneBase extends Phaser.Scene {
 
   /**
    * Utility: create a label text at (x, y) with standard Gym styling.
+   * Uses the shared Renderer helper for consistent text rendering.
    */
   protected addLabel(
     x: number,
@@ -162,10 +164,8 @@ export abstract class GymSceneBase extends Phaser.Scene {
     text: string,
     opts?: Partial<{ fontSize: string; color: string }>,
   ): Phaser.GameObjects.Text {
-    return this.add.text(x, y, text, {
+    return createHudText(this, x, y, text, opts?.color ?? '#aaccaa', {
       fontSize: opts?.fontSize ?? '14px',
-      color: opts?.color ?? '#aaccaa',
-      fontFamily: 'monospace',
     });
   }
 
@@ -181,14 +181,9 @@ export abstract class GymSceneBase extends Phaser.Scene {
   ): Phaser.GameObjects.Text {
     const color = opts?.color ?? '#88ff88';
     const hoverColor = opts?.hoverColor ?? '#bbffbb';
-    const btn = this.add
-      .text(x, y, label, {
-        fontSize: opts?.fontSize ?? '14px',
-        color,
-        fontFamily: 'monospace',
-        fontStyle: 'bold',
-      })
-      .setInteractive({ useHandCursor: true });
+    const btn = createHudText(this, x, y, label, color, {
+      fontSize: opts?.fontSize ?? '14px',
+    }).setInteractive({ useHandCursor: true });
 
     btn.on('pointerdown', callback);
     btn.on('pointerover', () => btn.setColor(hoverColor));
diff --git a/example-games/gym/scenes/GymTooltipScene.ts b/example-games/gym/scenes/GymTooltipScene.ts
index ffc42bae..c5b242f4 100644
--- a/example-games/gym/scenes/GymTooltipScene.ts
+++ b/example-games/gym/scenes/GymTooltipScene.ts
@@ -13,6 +13,7 @@
 import { GymSceneBase } from './GymSceneBase';
 import { GYM_TOOLTIP_KEY } from '../GymRegistry';
 import { GAME_W, GAME_H, FONT_FAMILY, TooltipManager } from '../../../src/ui';
+import { createHudText } from '../../../src/ui/Renderer';
 
 export class GymTooltipScene extends GymSceneBase {
   private domTooltipManager!: TooltipManager;
@@ -57,19 +58,19 @@ export class GymTooltipScene extends GymSceneBase {
     this.addButton(cx + 380, y, '[ Hide ]', () => this.hideTooltip());
 
     y += 40;
-    const modeLabel = this.addLabel(cx, y, 'Mode: DOM overlay', { fontSize: '16px', color: '#88ccff' });
+    const modeLabel = createHudText(this, cx, y, 'Mode: DOM overlay', '#88ccff', { fontSize: '16px' });
     modeLabel.setOrigin(0.5);
     modeLabel.setName('modeLabel');
 
     y += 50;
-    this.addLabel(cx, y, '── Hover over the cards below ──', { fontSize: '14px', color: '#6699aa' }).setOrigin(0.5);
+    createHudText(this, cx, y, '── Hover over the cards below ──', '#6699aa', { fontSize: '14px' }).setOrigin(0.5);
 
     // Create interactive demo cards
     y += 50;
     this.createDemoCards(y);
 
     y += 180;
-    this.addLabel(cx, y, '── Event Log ──', { fontSize: '12px', color: '#6699aa' }).setOrigin(0.5);
+    createHudText(this, cx, y, '── Event Log ──', '#6699aa', { fontSize: '12px' }).setOrigin(0.5);
 
     // Create tooltip managers
     this.domTooltipManager = new TooltipManager(this);
@@ -109,11 +110,7 @@ export class GymTooltipScene extends GymSceneBase {
       const card = this.add.container(data.x, startY);
       const bg = this.add.rectangle(0, 0, 150, 80, data.color, 0.8);
       bg.setStrokeStyle(2, 0xffffff);
-      const label = this.add.text(0, 0, data.name.split(' — ')[0], {
-        fontSize: '14px',
-        color: '#ffffff',
-        fontFamily: FONT_FAMILY,
-      }).setOrigin(0.5);
+      const label = createHudText(this, 0, 0, data.name.split(' — ')[0], '#ffffff', { fontSize: '14px' }).setOrigin(0.5);
 
       card.add([bg, label]);
       // Set hit area on the background rectangle for interactivity
@@ -189,11 +186,7 @@ export class GymTooltipScene extends GymSceneBase {
     this.logTexts = [];
     const baseY = 450;
     for (let i = 0; i < this.eventLog.length; i++) {
-      const txt = this.add.text(GAME_W / 2, baseY + i * 17, this.eventLog[i], {
-        fontSize: '11px',
-        color: '#aabbcc',
-        fontFamily: 'monospace',
-      }).setOrigin(0.5);
+      const txt = createHudText(this, GAME_W / 2, baseY + i * 17, this.eventLog[i], '#aabbcc', { fontSize: '11px' }).setOrigin(0.5);
       this.logTexts.push(txt);
     }
   }
diff --git a/example-games/gym/scenes/GymTranscriptScene.ts b/example-games/gym/scenes/GymTranscriptScene.ts
index d5ca569e..9bec3e16 100644
--- a/example-games/gym/scenes/GymTranscriptScene.ts
+++ b/example-games/gym/scenes/GymTranscriptScene.ts
@@ -19,6 +19,7 @@ import {
 import type { BaseTranscript } from '../../../src/core-engine';
 import { popTextOrIcon } from '../../../src/ui/popTextOrIcon';
 import { GAME_W } from '../../../src/ui/constants';
+import { createHudText } from '../../../src/ui/Renderer';
 
 /** Simple event shape for this demo. */
 interface DemoTranscriptEvent {
@@ -95,7 +96,7 @@ export class GymTranscriptScene extends GymSceneBase {
     this.addButton(cx + 200, y, '[ Show Transcript ]', () => this.showTranscript());
 
     y += 40;
-    this.addLabel(cx, y, '── Event Log ──', { fontSize: '12px', color: '#669966' }).setOrigin(0.5);
+    createHudText(this, cx, y, '── Event Log ──', '#669966', { fontSize: '12px' }).setOrigin(0.5);
 
     this.newSession();
   }
@@ -168,11 +169,7 @@ export class GymTranscriptScene extends GymSceneBase {
     this.logTexts = [];
     const baseY = 140;
     for (let i = 0; i < this.eventLog.length; i++) {
-      const txt = this.add.text(40, baseY + i * 16, this.eventLog[i], {
-        fontSize: '11px',
-        color: '#aaddaa',
-        fontFamily: 'monospace',
-      });
+      const txt = createHudText(this, 40, baseY + i * 16, this.eventLog[i], '#aaddaa', { fontSize: '11px' });
       this.logTexts.push(txt);
     }
   }
diff --git a/example-games/gym/scenes/GymUndoRedoScene.ts b/example-games/gym/scenes/GymUndoRedoScene.ts
index 3dd6ac97..37afc095 100644
--- a/example-games/gym/scenes/GymUndoRedoScene.ts
+++ b/example-games/gym/scenes/GymUndoRedoScene.ts
@@ -17,6 +17,7 @@ import { UndoRedoManager, CompoundCommand } from '../../../src/core-engine/UndoR
 import type { Command } from '../../../src/core-engine/UndoRedoManager';
 import { popTextOrIcon } from '../../../src/ui/popTextOrIcon';
 import { GAME_W } from '../../../src/ui/constants';
+import { createHudText } from '../../../src/ui/Renderer';
 
 /** A simple command that increments/decrements a counter. */
 class IncrementCommand implements Command {
@@ -77,24 +78,19 @@ export class GymUndoRedoScene extends GymSceneBase {
     y += 50;
 
     // State display
-    this.counterText = this.add.text(cx, y, 'Counter: 0', {
-      fontSize: '28px',
-      color: '#ffffff',
-      fontFamily: 'monospace',
-      fontStyle: 'bold',
-    }).setOrigin(0.5);
+    this.counterText = createHudText(this, cx, y, 'Counter: 0', '#ffffff', { fontSize: '28px' }).setOrigin(0.5);
 
     y += 40;
 
-    this.undoAvailText = this.addLabel(cx - 120, y, 'Can Undo: no', { fontSize: '14px', color: '#888888' });
-    this.redoAvailText = this.addLabel(cx + 80, y, 'Can Redo: no', { fontSize: '14px', color: '#888888' });
+    this.undoAvailText = createHudText(this, cx - 120, y, 'Can Undo: no', '#888888', { fontSize: '14px' });
+    this.redoAvailText = createHudText(this, cx + 80, y, 'Can Redo: no', '#888888', { fontSize: '14px' });
 
     y += 30;
-    this.historyText = this.addLabel(cx, y, 'History: (empty)', { fontSize: '12px', color: '#669966' });
+    this.historyText = createHudText(this, cx, y, 'History: (empty)', '#669966', { fontSize: '12px' });
     this.historyText.setOrigin(0.5);
 
     y += 20;
-    this.addLabel(cx, y, '── Event Log ──', { fontSize: '12px', color: '#669966' }).setOrigin(0.5);
+    createHudText(this, cx, y, '── Event Log ──', '#669966', { fontSize: '12px' }).setOrigin(0.5);
   }
 
   private executeAction(delta: number): void {
@@ -163,11 +159,7 @@ export class GymUndoRedoScene extends GymSceneBase {
     this.logTexts = [];
     const baseY = 250;
     for (let i = 0; i < this.eventLog.length; i++) {
-      const txt = this.add.text(40, baseY + i * 17, this.eventLog[i], {
-        fontSize: '11px',
-        color: '#aaddaa',
-        fontFamily: 'monospace',
-      });
+      const txt = createHudText(this, 40, baseY + i * 17, this.eventLog[i], '#aaddaa', { fontSize: '11px' });
       this.logTexts.push(txt);
     }
   }
diff --git a/example-games/lost-cities/scenes/LostCitiesOverlayManager.ts b/example-games/lost-cities/scenes/LostCitiesOverlayManager.ts
index 29e27601..ab71054a 100644
--- a/example-games/lost-cities/scenes/LostCitiesOverlayManager.ts
+++ b/example-games/lost-cities/scenes/LostCitiesOverlayManager.ts
@@ -6,15 +6,14 @@ import { EXPEDITION_COLORS } from '../LostCitiesCards';
 import type { LostCitiesSession, RoundScoreResult } from '../LostCitiesGame';
 import { getMatchWinner } from '../LostCitiesGame';
 import { autoSaveTranscript, TranscriptStore } from '../../../src/core-engine/transcript';
+import { GAME_W, GAME_H } from '../../../src/ui';
 import {
-  GAME_W,
-  GAME_H,
-  FONT_FAMILY,
+  createLcHudText,
   createOverlayBackground,
   createOverlayButton,
-  createOverlayMenuButton,
+  createLcMenuButton,
   dismissOverlay,
-} from '../../../src/ui';
+} from '../../../src/ui/Renderer/adapters/LostCitiesAdapter';
 import { SFX_KEYS } from './LostCitiesConstants';
 import type { LCTranscriptRecorder } from '../GameTranscript';
 
@@ -64,15 +63,11 @@ export class LostCitiesOverlayManager {
     const cx = GAME_W / 2;
     const topY = GAME_H / 2 - 200;
 
-    const title = this.scene.add
-      .text(cx, topY, `Round ${this.session.roundNumber - 1} Complete`, {
-        fontSize: '28px',
-        color: '#f0c040',
-        fontFamily: FONT_FAMILY,
-        fontStyle: 'bold',
-      })
-      .setOrigin(0.5, 0)
-      .setDepth(11);
+    const title = createLcHudText(this.scene, cx, topY, `Round ${this.session.roundNumber - 1} Complete`, '#f0c040', {
+      fontSize: '28px',
+      originX: 0.5,
+      originY: 0,
+    });
     this.overlayObjects.push(title);
 
     const [p0Details, p1Details] = roundScore.details;
@@ -80,14 +75,11 @@ export class LostCitiesOverlayManager {
 
     let y = topY + 50;
 
-    const header = this.scene.add
-      .text(cx, y, 'Color             You     AI', {
-        fontSize: '14px',
-        color: '#aaaaaa',
-        fontFamily: FONT_FAMILY,
-      })
-      .setOrigin(0.5, 0)
-      .setDepth(11);
+    const header = createLcHudText(this.scene, cx, y, 'Color             You     AI', '#aaaaaa', {
+      fontSize: '14px',
+      originX: 0.5,
+      originY: 0,
+    });
     this.overlayObjects.push(header);
     y += 26;
 
@@ -104,44 +96,39 @@ export class LostCitiesOverlayManager {
       const p0Str = p0Cards > 0 ? `${p0Score}` : '-';
       const p1Str = p1Cards > 0 ? `${p1Score}` : '-';
 
-      const row = this.scene.add
-        .text(cx, y, `${colorName.padEnd(14)}${p0Str.padStart(8)}${p1Str.padStart(8)}`, {
-          fontSize: '14px',
-          color: '#dddddd',
-          fontFamily: FONT_FAMILY,
-        })
-        .setOrigin(0.5, 0)
-        .setDepth(11);
+      const row = createLcHudText(this.scene, cx, y, `${colorName.padEnd(14)}${p0Str.padStart(8)}${p1Str.padStart(8)}`, '#dddddd', {
+        fontSize: '14px',
+        originX: 0.5,
+        originY: 0,
+      });
       this.overlayObjects.push(row);
       y += 22;
     }
 
     y += 8;
-    const totalRow = this.scene.add
-      .text(cx, y, `Round Total${String(p0Total).padStart(11)}${String(p1Total).padStart(8)}`, {
-        fontSize: '16px',
-        color: '#ffffff',
-        fontFamily: FONT_FAMILY,
-        fontStyle: 'bold',
-      })
-      .setOrigin(0.5, 0)
-      .setDepth(11);
+    const totalRow = createLcHudText(this.scene, cx, y, `Round Total${String(p0Total).padStart(11)}${String(p1Total).padStart(8)}`, '#ffffff', {
+      fontSize: '16px',
+      originX: 0.5,
+      originY: 0,
+    });
     this.overlayObjects.push(totalRow);
 
     y += 30;
     const [cum0, cum1] = this.session.cumulativeScores;
-    const cumRow = this.scene.add
-      .text(cx, y, `Cumulative${String(cum0).padStart(12)}${String(cum1).padStart(8)}`, {
-        fontSize: '16px',
-        color: '#f0c040',
-        fontFamily: FONT_FAMILY,
-      })
-      .setOrigin(0.5, 0)
-      .setDepth(11);
+    const cumRow = createLcHudText(this.scene, cx, y, `Cumulative${String(cum0).padStart(12)}${String(cum1).padStart(8)}`, '#f0c040', {
+      fontSize: '16px',
+      originX: 0.5,
+      originY: 0,
+    });
     this.overlayObjects.push(cumRow);
 
     y += 50;
     const btn = createOverlayButton(this.scene, cx, y, '[ Next Round ]');
+    try {
+      btn.setDepth(11);
+    } catch {
+      // Depth may not be available in headless / test environments.
+    }
     btn.on('pointerdown', () => {
       this.scene.sound.play?.(SFX_KEYS.UI_CLICK);
       this.dismiss();
@@ -176,70 +163,49 @@ export class LostCitiesOverlayManager {
       this.scene.sound.play?.(SFX_KEYS.SCORE_REVEAL);
     });
 
-    const title = this.scene.add
-      .text(cx, topY, winnerText, {
-        fontSize: '32px',
-        color: '#f0c040',
-        fontFamily: FONT_FAMILY,
-        fontStyle: 'bold',
-      })
-      .setOrigin(0.5, 0)
-      .setDepth(11);
+    const title = createLcHudText(this.scene, cx, topY, winnerText, '#f0c040', {
+      fontSize: '32px',
+      originX: 0.5,
+      originY: 0,
+    });
     this.overlayObjects.push(title);
 
     let y = topY + 55;
 
-    const header = this.scene.add
-      .text(cx, y, 'Round             You     AI', {
-        fontSize: '14px',
-        color: '#aaaaaa',
-        fontFamily: FONT_FAMILY,
-      })
-      .setOrigin(0.5, 0)
-      .setDepth(11);
+    const header = createLcHudText(this.scene, cx, y, 'Round             You     AI', '#aaaaaa', {
+      fontSize: '14px',
+      originX: 0.5,
+      originY: 0,
+    });
     this.overlayObjects.push(header);
     y += 26;
 
     for (let r = 0; r < this.session.roundScores.length; r++) {
       const rs = this.session.roundScores[r];
-      const row = this.scene.add
-        .text(
-          cx, y,
-          `Round ${r + 1}${String(rs.totals[0]).padStart(14)}${String(rs.totals[1]).padStart(8)}`,
-          {
-            fontSize: '14px',
-            color: '#dddddd',
-            fontFamily: FONT_FAMILY,
-          },
-        )
-        .setOrigin(0.5, 0)
-        .setDepth(11);
+      const row = createLcHudText(this.scene, cx, y, `Round ${r + 1}${String(rs.totals[0]).padStart(14)}${String(rs.totals[1]).padStart(8)}`, '#dddddd', {
+        fontSize: '14px',
+        originX: 0.5,
+        originY: 0,
+      });
       this.overlayObjects.push(row);
       y += 22;
     }
 
     y += 10;
     const [cum0, cum1] = this.session.cumulativeScores;
-    const totalRow = this.scene.add
-      .text(cx, y, `Final Total${String(cum0).padStart(11)}${String(cum1).padStart(8)}`, {
-        fontSize: '18px',
-        color: '#ffffff',
-        fontFamily: FONT_FAMILY,
-        fontStyle: 'bold',
-      })
-      .setOrigin(0.5, 0)
-      .setDepth(11);
+    const totalRow = createLcHudText(this.scene, cx, y, `Final Total${String(cum0).padStart(11)}${String(cum1).padStart(8)}`, '#ffffff', {
+      fontSize: '18px',
+      originX: 0.5,
+      originY: 0,
+    });
     this.overlayObjects.push(totalRow);
 
     y += 40;
-    const detailsTitle = this.scene.add
-      .text(cx, y, `Round ${this.session.roundNumber} Breakdown`, {
-        fontSize: '14px',
-        color: '#aaccaa',
-        fontFamily: FONT_FAMILY,
-      })
-      .setOrigin(0.5, 0)
-      .setDepth(11);
+    const detailsTitle = createLcHudText(this.scene, cx, y, `Round ${this.session.roundNumber} Breakdown`, '#aaccaa', {
+      fontSize: '14px',
+      originX: 0.5,
+      originY: 0,
+    });
     this.overlayObjects.push(detailsTitle);
     y += 22;
 
@@ -251,14 +217,11 @@ export class LostCitiesOverlayManager {
       const p1Score = p1Bd && p1Bd.cardCount > 0 ? `${p1Bd.score}` : '-';
       const colorName = color.charAt(0).toUpperCase() + color.slice(1);
 
-      const row = this.scene.add
-        .text(cx, y, `${colorName.padEnd(14)}${p0Score.padStart(8)}${p1Score.padStart(8)}`, {
-          fontSize: '12px',
-          color: '#bbbbbb',
-          fontFamily: FONT_FAMILY,
-        })
-        .setOrigin(0.5, 0)
-        .setDepth(11);
+      const row = createLcHudText(this.scene, cx, y, `${colorName.padEnd(14)}${p0Score.padStart(8)}${p1Score.padStart(8)}`, '#bbbbbb', {
+        fontSize: '12px',
+        originX: 0.5,
+        originY: 0,
+      });
       this.overlayObjects.push(row);
       y += 18;
     }
@@ -272,7 +235,9 @@ export class LostCitiesOverlayManager {
     });
     this.overlayObjects.push(newMatchBtn);
 
-    const menuBtn = createOverlayMenuButton(this.scene, cx + 85, y);
+    const menuBtn = createLcMenuButton(this.scene, cx + 85, y, 60, {
+      depth: 11,
+    });
     this.overlayObjects.push(menuBtn);
   }
 }
diff --git a/src/core-engine/SvgHelpers.ts b/src/core-engine/SvgHelpers.ts
index 88bbc1c4..6a6aa271 100644
--- a/src/core-engine/SvgHelpers.ts
+++ b/src/core-engine/SvgHelpers.ts
@@ -77,6 +77,45 @@ export async function rasteriseSvgToTexture(
   const promise = (async () => {
     const dataUri = svgToDataUri(svgText);
 
+    // Pre-create a placeholder canvas and register it immediately when the
+    // scene is known to be valid. This ensures a DPR-aware texture key exists
+    // in scene.textures synchronously so sprites created immediately after
+    // requesting a texture will not see Phaser's "missing texture" placeholder
+    // due to a later addCanvas call.
+    let placeholderCanvas: HTMLCanvasElement | null = null;
+    try {
+      // Only add a placeholder when the scene is currently valid for texture ops.
+      if (validScenes.has(scene) && !scene.textures?.exists(key)) {
+        const targetW = Math.round(width * qualityScale);
+        const targetH = Math.round(height * qualityScale);
+        const pc = document.createElement('canvas');
+        pc.width = targetW;
+        pc.height = targetH;
+        const pctx = pc.getContext('2d');
+        if (pctx) {
+          // Draw a very small single-colour placeholder so the texture has a
+          // valid backing immediately. Keep it visually neutral.
+          pctx.clearRect(0, 0, targetW, targetH);
+          pctx.fillStyle = '#dddddd';
+          pctx.fillRect(0, 0, targetW, targetH);
+        }
+
+        try {
+          scene.textures.addCanvas(key, pc);
+          const texture = scene.textures.get(key) as { setFilter?: (mode: number) => void } | undefined;
+          if (texture?.setFilter) {
+            texture.setFilter(1);
+          }
+          placeholderCanvas = pc;
+        } catch {
+          // Best-effort placeholder registration; fall back to later addCanvas.
+          placeholderCanvas = null;
+        }
+      }
+    } catch {
+      placeholderCanvas = null;
+    }
+
     await new Promise<void>((resolve) => {
       const img = new Image();
 
@@ -87,9 +126,12 @@ export async function rasteriseSvgToTexture(
             return;
           }
 
-          const canvas = document.createElement('canvas');
           const targetW = Math.round(width * qualityScale);
           const targetH = Math.round(height * qualityScale);
+
+          // Reuse the placeholder canvas if it was registered, otherwise create
+          // a fresh canvas and add it to the texture manager.
+          const canvas = placeholderCanvas ?? document.createElement('canvas');
           canvas.width = targetW;
           canvas.height = targetH;
 
@@ -113,12 +155,22 @@ export async function rasteriseSvgToTexture(
             // Never remove and re-add an existing texture key here.
             // Removing a texture that is still referenced by active frames can
             // transiently leave frame.source null in Phaser's WebGL path.
-            if (!scene.textures?.exists(key)) {
-              scene.textures.addCanvas(key, canvas);
-
+            if (!placeholderCanvas) {
+              if (!scene.textures?.exists(key)) {
+                scene.textures.addCanvas(key, canvas);
+
+                const texture = scene.textures.get(key) as { setFilter?: (mode: number) => void } | undefined;
+                if (texture?.setFilter) {
+                  // Phaser uses 1 for linear filtering; avoid runtime Phaser import in core helpers.
+                  texture.setFilter(1);
+                }
+              }
+            } else {
+              // If we reused the placeholder canvas, the texture is already
+              // backed by the same canvas reference. Update any texture state
+              // (filter) if available.
               const texture = scene.textures.get(key) as { setFilter?: (mode: number) => void } | undefined;
               if (texture?.setFilter) {
-                // Phaser uses 1 for linear filtering; avoid runtime Phaser import in core helpers.
                 texture.setFilter(1);
               }
             }
diff --git a/src/ui/Renderer/adapters/FeudalismAdapter.ts b/src/ui/Renderer/adapters/FeudalismAdapter.ts
new file mode 100644
index 00000000..2028855e
--- /dev/null
+++ b/src/ui/Renderer/adapters/FeudalismAdapter.ts
@@ -0,0 +1,59 @@
+/**
+ * Feudalism Adapter – bridges Feudalism scene rendering to the shared
+ * Renderer API.
+ *
+ * Provides a Feudalism-specific wrapper for `createActionButton` that
+ * matches the Feudalism visual style (dark green background, green label,
+ * green border) and compensates for the positioning convention difference:
+ * Feudalism's original private method used the button's vertical centre as
+ * the `y` coordinate, while the shared helper uses the top edge.
+ *
+ * @module FeudalismAdapter
+ */
+
+import Phaser from 'phaser';
+import {
+  createActionButton as sharedCreateActionButton,
+  ActionButtonOptions,
+} from '../index';
+
+// ---------------------------------------------------------------------------
+// Action button
+// ---------------------------------------------------------------------------
+
+/**
+ * Create an action button styled for Feudalism.
+ *
+ * Uses dark green background (`0x335533`), light green text (`#88ff88`),
+ * green border (`0x55aa55`), 155×42 px dimensions, and 17px bold font —
+ * matching the original private `createActionButton` in FeudalismRenderer.
+ *
+ * The `y` parameter is interpreted as the **vertical centre** of the button
+ * (matching the original Feudalism convention). The shared helper expects
+ * the top edge, so `y - height/2` is passed through internally.
+ *
+ * @param scene   - The Phaser scene.
+ * @param x       - X position (left edge).
+ * @param y       - Y position (vertical centre of the button).
+ * @param text    - Label text.
+ * @param callback - Click handler.
+ * @returns A Phaser.Container containing the button.
+ */
+export function createFeudalismActionButton(
+  scene: Phaser.Scene,
+  x: number,
+  y: number,
+  text: string,
+  callback: () => void,
+): Phaser.GameObjects.Container {
+  const btnW = 155;
+  const btnH = 42;
+  return sharedCreateActionButton(scene, x, y - btnH / 2, btnW, text, callback, {
+    height: btnH,
+    fillColor: 0x335533,
+    fillAlpha: 0.8,
+    strokeColor: 0x55aa55,
+    textColor: '#88ff88',
+    fontSize: '17px',
+  } as ActionButtonOptions);
+}
diff --git a/src/ui/Renderer/adapters/LostCitiesAdapter.ts b/src/ui/Renderer/adapters/LostCitiesAdapter.ts
new file mode 100644
index 00000000..b56afef2
--- /dev/null
+++ b/src/ui/Renderer/adapters/LostCitiesAdapter.ts
@@ -0,0 +1,105 @@
+/**
+ * Lost Cities Adapter – bridges Lost Cities scene rendering to the shared
+ * Renderer API.
+ *
+ * Re-exports shared helpers (`createHudText`, `createActionButton`,
+ * `createOverlayBackground`, `dismissOverlay`) and provides Lost Cities–specific
+ * defaults for HUD text so that `LostCitiesRenderer`, `LostCitiesOverlayManager`,
+ * and related modules can use engine-standard patterns without duplicating
+ * styling logic.
+ *
+ * @module LostCitiesAdapter
+ */
+
+import Phaser from 'phaser';
+import {
+  createHudText as sharedCreateHudText,
+  createActionButton as sharedCreateActionButton,
+  HudTextOptions,
+  ActionButtonOptions,
+} from '../index';
+import {
+  createOverlayBackground as sharedCreateOverlayBackground,
+  dismissOverlay as sharedDismissOverlay,
+} from '../../Overlay';
+import { createOverlayButton as sharedCreateOverlayButton } from '../../OverlayButton';
+import { FONT_FAMILY } from '../../../ui/constants';
+
+// Re-export shared helpers so callers can import from a single adapter module.
+export { sharedCreateHudText as createHudText };
+export { sharedCreateActionButton as createActionButton };
+export { sharedCreateOverlayBackground as createOverlayBackground };
+export { sharedCreateOverlayButton as createOverlayButton };
+export { sharedDismissOverlay as dismissOverlay };
+export type { HudTextOptions, ActionButtonOptions };
+
+// ---------------------------------------------------------------------------
+// HUD text helper
+// ---------------------------------------------------------------------------
+
+/** Default depth for HUD UI elements in Lost Cities. */
+const LC_DEPTH_HUD = 1000;
+
+/**
+ * Create a HUD text element styled for Lost Cities.
+ *
+ * This is a thin wrapper around `createHudText` that applies the Lost Cities
+ * default font family and depth convention so that renderer code
+ * doesn't need to repeat styling parameters.
+ *
+ * @param scene   - The Phaser scene.
+ * @param x       - X position.
+ * @param y       - Y position.
+ * @param text    - Initial text content.
+ * @param color   - CSS colour string (e.g. '#aaccaa').
+ * @param options - Optional overrides (font size, origin, etc.).
+ * @returns       A Phaser.Text object with depth DEPTH_HUD.
+ */
+export function createLcHudText(
+  scene: Phaser.Scene,
+  x: number,
+  y: number,
+  text: string,
+  color: string,
+  options?: { fontSize?: string } & HudTextOptions,
+): Phaser.GameObjects.Text {
+  const textObj = sharedCreateHudText(scene, x, y, text, color, {
+    fontFamily: FONT_FAMILY,
+    ...options,
+  });
+  try {
+    textObj.setDepth(LC_DEPTH_HUD);
+  } catch {
+    // Depth may not be available in headless / test environments.
+  }
+  return textObj;
+}
+
+// ---------------------------------------------------------------------------
+// Overlay button helper
+// ---------------------------------------------------------------------------
+
+/**
+ * Create a "Menu" action button that navigates back to the GameSelectorScene,
+ * styled for Lost Cities.
+ *
+ * @param scene   - The Phaser scene.
+ * @param x       - X position (left edge of the button).
+ * @param y       - Y position (top edge of the button).
+ * @param width   - Button width in pixels.
+ * @param options - Optional styling overrides forwarded to `createActionButton`.
+ * @returns       A Phaser.Container containing the menu button.
+ */
+export function createLcMenuButton(
+  scene: Phaser.Scene,
+  x: number,
+  y: number,
+  width: number,
+  options?: ActionButtonOptions,
+): Phaser.GameObjects.Container {
+  return sharedCreateActionButton(scene, x, y, width, 'Menu', () => {
+    scene.scene.start('GameSelectorScene');
+  }, options);
+}
+
+export const LC_ADAPTER_VERSION = '1.0.0';
diff --git a/tests/core-engine/SvgHelpers.test.ts b/tests/core-engine/SvgHelpers.test.ts
index bc5a7377..d2467667 100644
--- a/tests/core-engine/SvgHelpers.test.ts
+++ b/tests/core-engine/SvgHelpers.test.ts
@@ -130,9 +130,11 @@ describe('SvgHelpers', () => {
     );
 
     expect(addedCanvases).toHaveLength(1);
-    expect(createdCanvases).toHaveLength(1);
-    expect(createdCanvases[0].width).toBe(40);
-    expect(createdCanvases[0].height).toBe(80);
+    // Depending on environment and placeholder handling we may create one or more
+    // canvases. Ensure at least one created canvas matches the expected size.
+    expect(createdCanvases.length).toBeGreaterThanOrEqual(1);
+    const found = createdCanvases.some((c) => c.width === 40 && c.height === 80);
+    expect(found).toBe(true);
   });
 
   it('does not rasterise when scene is marked invalid', async () => {
diff --git a/tests/main-street/MainStreetSvgSmoke.browser.test.ts b/tests/main-street/MainStreetSvgSmoke.browser.test.ts
index ce925328..13e7532a 100644
--- a/tests/main-street/MainStreetSvgSmoke.browser.test.ts
+++ b/tests/main-street/MainStreetSvgSmoke.browser.test.ts
@@ -89,9 +89,15 @@ describe('MainStreetScene SVG smoke', () => {
       return keys.length > 0;
     }, 3000);
 
+    await waitForCondition(() => {
+      const keys = (scene.textures.getTextureKeys?.() ?? []).filter((k) => k.startsWith('ms_card_'));
+      if (keys.length === 0) return false;
+      return keys.some((key) => isTextureNonSolid(scene, key));
+    }, 5000);
+
+    // Re-check and assert for clarity
     const cardKeys = (scene.textures.getTextureKeys?.() ?? []).filter((k) => k.startsWith('ms_card_')).sort();
     expect(cardKeys.length).toBeGreaterThan(0);
-
     const hasVariation = cardKeys.some((key) => isTextureNonSolid(scene, key));
     expect(hasVariation).toBe(true);
   }, 10000);
diff --git a/tests/sushi-go/SushiGoIcons.browser.test.ts b/tests/sushi-go/SushiGoIcons.browser.test.ts
index 489f9cbc..5fdc7b31 100644
--- a/tests/sushi-go/SushiGoIcons.browser.test.ts
+++ b/tests/sushi-go/SushiGoIcons.browser.test.ts
@@ -56,6 +56,7 @@ describe('SushiGoScene SVG icon rendering', () => {
     }
 
     // Find the first hand card container and compute its bounds
+    await waitForCondition(() => !!scene.handContainer && scene.handContainer.list && scene.handContainer.list.length > 0, 3000);
     const handContainer = scene.handContainer as Phaser.GameObjects.Container;
     expect(handContainer).toBeTruthy();
     const firstChild = handContainer.list[0] as Phaser.GameObjects.Container;
@@ -71,8 +72,59 @@ describe('SushiGoScene SVG icon rendering', () => {
       'icon-wasabi', 'icon-pudding', 'icon-chopsticks',
     ];
 
-    let foundVariation = false;
+    // Wait for any one of the icon textures to become non-solid. This
+    // accounts for the placeholder-first texture registration where a
+    // texture key may exist but its rasterisation is still in-flight.
+    await waitForCondition(() => {
+      for (const key of keysToTry) {
+        try {
+          if (!scene.textures.exists(key)) continue;
+          const tex = scene.textures.get(key) as any;
+          const src = tex?.source?.[0];
+          if (!src) continue;
+          const imgEl = src.image as HTMLImageElement | HTMLCanvasElement | undefined;
+          if (!imgEl) continue;
+
+          const off = document.createElement('canvas');
+          const sw = (imgEl as any).width || 1;
+          const sh = (imgEl as any).height || 1;
+          off.width = sw;
+          off.height = sh;
+          const ctx = off.getContext('2d');
+          if (!ctx) continue;
+          ctx.drawImage(imgEl as any, 0, 0, sw, sh);
+
+          const sampleW = Math.max(1, Math.floor(sw * 0.5));
+          const sampleH = Math.max(1, Math.floor(sh * 0.5));
+          const sampleX = Math.floor((sw - sampleW) / 2);
+          const sampleY = Math.floor((sh - sampleH) / 2);
+
+          const imgData = ctx.getImageData(sampleX, sampleY, sampleW, sampleH).data;
+          if (imgData.length < 4) continue;
+
+          const r0 = imgData[0];
+          const g0 = imgData[1];
+          const b0 = imgData[2];
+          const a0 = imgData[3];
+          for (let i = 4; i < imgData.length; i += 4) {
+            if (
+              imgData[i] !== r0 ||
+              imgData[i + 1] !== g0 ||
+              imgData[i + 2] !== b0 ||
+              imgData[i + 3] !== a0
+            ) {
+              return true;
+            }
+          }
+        } catch (e) {
+          // ignore and try next texture
+        }
+      }
+      return false;
+    }, 5000);
 
+    // Final assertion for clarity: at least one texture should have variation
+    let foundVariation = false;
     for (const key of keysToTry) {
       try {
         if (!scene.textures.exists(key)) continue;
diff --git a/tests/the-mind/ai-out-of-turn-play.browser.test.ts b/tests/the-mind/ai-out-of-turn-play.browser.test.ts
new file mode 100644
index 00000000..e27c51e8
--- /dev/null
+++ b/tests/the-mind/ai-out-of-turn-play.browser.test.ts
@@ -0,0 +1,81 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import Phaser from 'phaser';
+import { createTheMindGame } from '../../example-games/the-mind/createTheMindGame';
+import { getCanonicalTextureKey, resolveTemplateId } from '../../example-games/the-mind/MindCardTextureAdapter';
+import { CARD_W, CARD_H } from '../../example-games/the-mind/scenes/MindConstants';
+
+describe('The Mind — AI out-of-turn play (browser integration)', () => {
+  let game: Phaser.Game | null = null;
+
+  afterEach(() => {
+    if (game) game.destroy(true, false);
+    const el = document.getElementById('game-container');
+    if (el && el.parentNode) el.parentNode.removeChild(el);
+    game = null;
+  });
+
+  it('plays an AI card without showing a missing-texture placeholder and registers the final DPR-aware texture', async () => {
+    const container = document.createElement('div');
+    container.id = 'game-container';
+    document.body.appendChild(container);
+
+    // Create the game (TheMindScene will run its create() lifecycle)
+    game = createTheMindGame({ parent: 'game-container', width: 900, height: 700 });
+
+    // Wait for the TheMindScene to be initialized and contain an AI hand.
+    const scene = () => game?.scene.getScene('TheMindScene') as any | undefined;
+
+    await new Promise<void>((resolve, reject) => {
+      const start = Date.now();
+      const check = () => {
+        const s = scene();
+        if (s && s.session && s.mindAnimator && s.session.players && s.session.players[1] && s.session.players[1].hand && s.session.players[1].hand.length > 0) {
+          resolve();
+          return;
+        }
+        if (Date.now() - start > 10_000) {
+          reject(new Error('TheMindScene did not initialize in time'));
+          return;
+        }
+        setTimeout(check, 50);
+      };
+      check();
+    });
+
+    const s = scene() as any as Phaser.Scene & { session: any; mindAnimator: any };
+
+    // Pick the first AI card value for the play
+    const aiHand = s.session.players[1].hand;
+    if (!aiHand || aiHand.length === 0) throw new Error('AI hand is empty');
+    const aiValue = aiHand[0].value as number;
+
+    // Compute the expected DPR-aware texture key used by the flip animation
+    const templateId = resolveTemplateId(aiValue);
+    const expectedKey = getCanonicalTextureKey(templateId, CARD_W, CARD_H);
+
+    // Trigger the AI card play animation and wait for it to complete.
+    await new Promise<void>((resolve, reject) => {
+      let timedOut = false;
+      const timeout = setTimeout(() => {
+        timedOut = true;
+        reject(new Error('AI play animation did not complete in time'));
+      }, 10_000);
+
+      try {
+        s.mindAnimator.animateCardTowardsPile(1, aiValue, () => {
+          if (timedOut) return;
+          clearTimeout(timeout);
+          resolve();
+        });
+      } catch (err) {
+        clearTimeout(timeout);
+        reject(err);
+      }
+    });
+
+    // Final assertions: DPR-aware key shape and texture registered in the scene.
+    expect(/ms_card_mind-\d+_\d+x\d+@\d+/.test(expectedKey)).toBe(true);
+    const textures = (game!.scene.getScene('TheMindScene') as any).textures as Phaser.Textures.TextureManager;
+    expect(textures.exists(expectedKey)).toBe(true);
+  }, 30_000);
+});
diff --git a/tests/the-mind/mind-renderer.test.ts b/tests/the-mind/mind-renderer.test.ts
index 7e4b5fdb..fefa8ec4 100644
--- a/tests/the-mind/mind-renderer.test.ts
+++ b/tests/the-mind/mind-renderer.test.ts
@@ -32,7 +32,7 @@ vi.mock('../../example-games/the-mind/MindCardTextureAdapter', () => ({
   ),
 }));
 
-vi.mock('/home/rgardler/projects/Tableau-Card-Engine/src/ui/Renderer/adapters/MindAdapter', () => ({
+vi.mock('../../src/ui/Renderer/adapters/MindAdapter', () => ({
   createMindHudText: createMindHudTextMock,
 }));