Ship the mobile pause visibility and compact overlay fix as v1.1.11

This follow-up release fixes the mobile pause button lifecycle and makes the pause overlay more usable on ultra-short landscape phone screens without changing the underlying pause/save flow.

Constraint: Must preserve the existing pause-state controller and save-slot interactions while reducing visual crowding on iPhone-class landscape viewports
Constraint: Must keep the mobile pause affordance available after rotate cycles without reintroducing accidental fire-touch input coupling
Rejected: Rebuild the mobile pause overlay into a separate phone-specific screen | too much scope for a visibility/layout follow-up patch
Confidence: high
Scope-risk: narrow
Reversibility: clean
Directive: Keep future mobile pause/HUD work validated against ultra-short landscape phone layouts and first-render touch-control visibility
Tested: bun test; bun run levels:validate; bun run lint; bun run build; bun run knip; bun run bundle:check
Not-tested: fresh device screenshot after final release packaging

Author: vriesdcrv

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.1.11] - 2026-04-27
+
+### Fixed
+- Fixed the mobile pause button so it renders immediately on first mobile load instead of only appearing after a rotate/reflow cycle.
+- Fixed mobile pause-button visibility across portrait/landscape reorientation so the touch pause affordance remains available after rotating back into gameplay.
+
+### Changed
+- Tightened the ultra-short mobile pause overlay by reducing the oversized `PAUSED` title and dropping subtitle/hint bands on constrained landscape phone screens, giving the checkpoint grid and footer controls more breathing room.
+
+### Quality
+- Added regression coverage for ultra-short phone pause layout behavior.
+- Verified with `bun test`, `bun run levels:validate`, `bun run lint`, `bun run build`, `bun run knip`, and `bun run bundle:check`.
+
 ## [1.1.10] - 2026-04-27
 
 ### Changed

docs/releases/1.1.11.md

@@ -0,0 +1,30 @@
+# Release 1.1.11 — Mobile pause visibility and compact overlay polish
+
+## Highlights
+
+- Fixes the mobile pause button so it appears immediately and stays available after rotate cycles.
+- Makes the pause overlay less cramped on ultra-short landscape phone screens such as the iPhone 13 mini.
+
+## What changed
+
+- Mobile pause button lifecycle:
+  - `src/systems/MobileControls.ts`
+  - The touch pause control now draws on first render, remains visible as a mobile affordance across blocked/unblocked states, and no longer depends on a relayout cycle to appear.
+
+- Compact mobile pause overlay:
+  - `src/scenes/gameScene/PauseOverlay.ts`
+  - `src/scenes/gameScene/pauseOverlay/{types,view}.ts`
+  - On ultra-short landscape phone viewports, the pause title scales down and the extra subtitle/hint copy is removed so checkpoint rows and footer actions have more usable space.
+
+- Validation coverage:
+  - `tests/responsiveLayout.test.ts`
+  - Added coverage that locks the ultra-short phone pause overlay into the less-cramped layout rules.
+
+## Validation
+
+- `bun test`
+- `bun run levels:validate`
+- `bun run lint`
+- `bun run build`
+- `bun run knip`
+- `bun run bundle:check`

docs/releases/README.md

@@ -2,6 +2,7 @@
 
 Latest first.
 
+- [`1.1.11`](./1.1.11.md) — fixes mobile pause-button first-render/rotate visibility and relaxes the ultra-short phone pause layout
 - [`1.1.10`](./1.1.10.md) — lowers the mobile pause button beneath the HUD for cleaner touch spacing
 - [`1.1.9`](./1.1.9.md) — mobile menu title-band fix plus top-right touch pause control and fire-touch filtering cleanup
 - [`1.1.8`](./1.1.8.md) — pause controls, persistent checkpoints, shared neon UI controls, and music-volume parity polish

package.json

@@ -1,6 +1,6 @@
 {
   "name": "space-explorer",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "author": "Douwe de Vries",
   "license": "MIT",
   "private": true,

src/scenes/gameScene/PauseOverlay.ts

@@ -214,6 +214,9 @@ export class PauseOverlay {
     this.blocker.setSize(layout.width, layout.height);
     drawPauseOverlayBackdrop(this.dimmer, this.panel, layout);
 
+    this.titleText.setFontSize(layout.titleFontSize);
+    this.subtitleText.setFontSize(layout.subtitleFontSize);
+    this.hintText.setFontSize(layout.hintFontSize);
     this.titleText.setPosition(layout.centerX, layout.titleY);
     this.subtitleText.setPosition(layout.centerX, layout.subtitleY);
     this.hintText.setPosition(layout.centerX, layout.hintY);

src/scenes/gameScene/pauseOverlay/types.ts

@@ -43,6 +43,9 @@ export interface PauseOverlayLayout {
   panelY: number;
   panelWidth: number;
   panelHeight: number;
+  titleFontSize: number;
+  subtitleFontSize: number;
+  hintFontSize: number;
   titleY: number;
   subtitleY: number;
   subtitleVisible: boolean;

src/scenes/gameScene/pauseOverlay/view.ts

@@ -19,7 +19,7 @@ export const PAUSE_OVERLAY_SLIDER_SPACING = 68;
 
 const PAUSE_BREAKPOINT_NARROW_WIDTH = 720;
 const PAUSE_BREAKPOINT_SHORT_HEIGHT = 520;
-const PAUSE_BREAKPOINT_VERY_SHORT_HEIGHT = 360;
+const PAUSE_BREAKPOINT_VERY_SHORT_HEIGHT = 400;
 const PAUSE_BREAKPOINT_ULTRA_COMPACT_WIDTH = 340;
 const PAUSE_BREAKPOINT_ULTRA_COMPACT_HEIGHT = 380;
 
@@ -131,9 +131,12 @@ export function getPauseOverlayLayout(scene: Phaser.Scene): PauseOverlayLayout {
     ? panelWidth - contentInset * 2
     : Math.min(310, panelX + panelWidth - contentRight - 42);
   const slotBlockHeight = slotRowHeight * 3 + slotRowGap * 2;
-  const titleY = panelY + (shortViewport ? 38 : 96);
-  const baseSubtitleY = panelY + (shortViewport ? 72 : 176);
-  const baseHintY = panelY + (shortViewport ? 96 : 216);
+  const titleFontSize = veryShortViewport ? 64 : shortViewport ? 72 : 86;
+  const subtitleFontSize = veryShortViewport ? 14 : 16;
+  const hintFontSize = veryShortViewport ? 12 : 14;
+  const titleY = panelY + (veryShortViewport ? 60 : shortViewport ? 38 : 96);
+  const baseSubtitleY = panelY + (veryShortViewport ? 94 : shortViewport ? 72 : 176);
+  const baseHintY = panelY + (veryShortViewport ? 118 : shortViewport ? 96 : 216);
   let musicHeaderY = panelY + (shortViewport ? 96 : compact ? 148 : 252);
   let sliderStartY = panelY + (shortViewport ? 126 : compact ? 176 : 284);
   const desiredSlotStartY = stackedLayout
@@ -144,7 +147,7 @@ export function getPauseOverlayLayout(scene: Phaser.Scene): PauseOverlayLayout {
   const earliestSlotStartY = panelY + (ultraCompactViewport ? 34 : veryShortViewport ? 36 : shortViewport ? 24 : stackedLayout ? 130 : 150);
   const latestSlotStartY = statusY - statusTextHeight / 2 - 8 - slotBlockHeight;
 
-  let subtitleVisible = !ultraCompactViewport;
+  let subtitleVisible = !ultraCompactViewport && !veryShortViewport;
   let hintVisible = !ultraCompactViewport && !veryShortViewport;
   let subtitleY = baseSubtitleY;
   let hintY = baseHintY;
@@ -225,6 +228,9 @@ export function getPauseOverlayLayout(scene: Phaser.Scene): PauseOverlayLayout {
     panelY,
     panelWidth,
     panelHeight,
+    titleFontSize,
+    subtitleFontSize,
+    hintFontSize,
     titleY,
     subtitleY,
     subtitleVisible,
@@ -284,7 +290,7 @@ export function drawPauseOverlayBackdrop(
     glow: true,
   });
 
-  drawNeonDivider(panel, layout.centerX, layout.titleY - 48, Math.min(620, layout.panelWidth - 160));
+  drawNeonDivider(panel, layout.centerX, Math.max(layout.panelY + 24, layout.titleY - 48), Math.min(620, layout.panelWidth - 160));
   if (layout.hintVisible) {
     drawNeonDivider(
       panel,

src/systems/MobileControls.ts

@@ -104,6 +104,7 @@ export class MobileControls {
 
     this.refreshVisibility();
     this.updateJoystickVisual();
+    this.updatePauseButtonVisual();
 
     return this;
   }
@@ -163,6 +164,7 @@ export class MobileControls {
     }
 
     this.refreshVisibility();
+    this.updatePauseButtonVisual();
   }
 
   isEnabled(): boolean {
@@ -260,19 +262,20 @@ export class MobileControls {
 
   private refreshVisibility(): void {
     const visible = this.isEnabled();
+    const pauseVisible = this.enabledForTouchDevice && this.scene !== null;
 
     this.joystickBase?.setVisible(visible);
     this.joystickCenter?.setVisible(visible);
     this.joystickThumb?.setVisible(visible);
-    this.pauseButtonBg?.setVisible(visible);
-    this.pauseButtonIcon?.setVisible(visible);
-    this.pauseButtonHitArea?.setVisible(visible);
+    this.pauseButtonBg?.setVisible(pauseVisible);
+    this.pauseButtonIcon?.setVisible(pauseVisible);
+    this.pauseButtonHitArea?.setVisible(pauseVisible);
 
     if (this.joystickBase?.input) {
       this.joystickBase.input.enabled = visible;
     }
     if (this.pauseButtonHitArea?.input) {
-      this.pauseButtonHitArea.input.enabled = visible;
+      this.pauseButtonHitArea.input.enabled = pauseVisible && !this.blocked;
     }
   }
 

tests/responsiveLayout.test.ts

@@ -324,6 +324,15 @@ describe('responsive save-slot layouts', () => {
     expect(layout.slotRows[0]?.width).toBeGreaterThan(400);
   });
 
+  test('pause overlay drops subtitle and hint bands on ultra-short phone landscape viewports', () => {
+    const layout = getPauseOverlayLayout(createScene(812, 375) as never);
+
+    expect(layout.subtitleVisible).toBe(false);
+    expect(layout.hintVisible).toBe(false);
+    expect(layout.titleFontSize).toBeLessThan(86);
+    assertPauseRequiredControlsDoNotOverlap({ width: 812, height: 375 });
+  });
+
   test.each([
     { width: 1024, height: 768 },
     { width: 1280, height: 800 },