Use full portrait viewport for room-bank layout

src/main.js

@@ -33,18 +33,45 @@ window.addEventListener('appinstalled', () => {
 })
 
 const WIDTH = 960
-const HEIGHT = 720
+
+// Match the Phaser logical height to the usable browser/PWA viewport.
+// This keeps the same 960-wide room geometry while allowing the five
+// floors to expand vertically on phones instead of letterboxing a 4:3 game.
+const VIEWPORT_W = Math.max(
+  320,
+  Math.round(window.visualViewport?.width ?? window.innerWidth)
+)
+const VIEWPORT_H = Math.max(
+  480,
+  Math.round(window.visualViewport?.height ?? window.innerHeight)
+)
+const HEIGHT = Math.max(
+  720,
+  Math.min(1600, Math.round(WIDTH * VIEWPORT_H / VIEWPORT_W))
+)
 
 const HOUSE_TOP = 74
+const BOTTOM_UI_H = 72
+const HOUSE_BOTTOM_PAD = 28
 const LEFT_X = 50
 const BANK_W = 350
 const ELEVATOR_GAP = 20
 const ELEVATOR_W = 120
 const ELEVATOR_X = LEFT_X + BANK_W + ELEVATOR_GAP
 const RIGHT_X = ELEVATOR_X + ELEVATOR_W + ELEVATOR_GAP
-const FLOOR_H = 102
 const FLOOR_GAP = 8
 const FLOOR_COUNT = 5
+const FLOOR_H = Math.floor(
+  (
+    HEIGHT -
+    HOUSE_TOP -
+    BOTTOM_UI_H -
+    HOUSE_BOTTOM_PAD -
+    FLOOR_GAP * (FLOOR_COUNT - 1)
+  ) / FLOOR_COUNT
+)
+const STATUS_Y = HEIGHT - 36
+const ELEVATOR_CAR_H = Math.min(140, Math.max(76, Math.round(FLOOR_H * 0.58)))
 
 const PLAYER_DRAG_FOLLOW = 0.18
 const PLAYER_DRAG_OFFSET_Y = 42
@@ -95,9 +122,9 @@ function makeRoom(id, name, floor, side, color) {
     width: BANK_W,
     height: FLOOR_H,
     walkBand: {
-      minY: y + 66,
-      maxY: y + 94,
-      homeY: y + 86
+      minY: y + Math.round(FLOOR_H * 0.62),
+      maxY: y + FLOOR_H - 10,
+      homeY: y + Math.round(FLOOR_H * 0.82)
     }
   }
 }
@@ -118,7 +145,7 @@ const ROOMS = [
 const ROOM_BY_ID = new Map(ROOMS.map((room) => [room.id, room]))
 
 function elevatorStopY(room) {
-  return room.y + 52
+  return room.y + Math.round(FLOOR_H / 2)
 }
 
 function elevatorEntry(room) {
@@ -292,15 +319,15 @@ class HouseScene extends Phaser.Scene {
     const stopY = elevatorStopY(currentRoom)
     const cx = ELEVATOR_X + ELEVATOR_W / 2
 
-    this.elevatorCarBack = this.add.rectangle(cx, stopY, 94, 76, 0xfff8fb, 1)
+    this.elevatorCarBack = this.add.rectangle(cx, stopY, 94, ELEVATOR_CAR_H, 0xfff8fb, 1)
       .setStrokeStyle(3, 0xb98ba2)
       .setDepth(190)
 
-    this.elevatorDoorLeft = this.add.rectangle(cx - 23, stopY, 44, 68, 0xf4bfd2, 1)
+    this.elevatorDoorLeft = this.add.rectangle(cx - 23, stopY, 44, ELEVATOR_CAR_H - 8, 0xf4bfd2, 1)
       .setStrokeStyle(2, 0xc17d9d)
       .setDepth(210)
 
-    this.elevatorDoorRight = this.add.rectangle(cx + 23, stopY, 44, 68, 0xf4bfd2, 1)
+    this.elevatorDoorRight = this.add.rectangle(cx + 23, stopY, 44, ELEVATOR_CAR_H - 8, 0xf4bfd2, 1)
       .setStrokeStyle(2, 0xc17d9d)
       .setDepth(210)
 
@@ -313,7 +340,7 @@ class HouseScene extends Phaser.Scene {
   }
 
   buildUi() {
-    this.statusText = this.add.text(WIDTH / 2, 680, 'Living Room', {
+    this.statusText = this.add.text(WIDTH / 2, STATUS_Y, 'Living Room', {
       fontFamily: 'Arial Rounded MT Bold, ui-rounded, sans-serif',
       fontSize: '18px',
       color: '#6d4c61',
@@ -321,7 +348,7 @@ class HouseScene extends Phaser.Scene {
       padding: { x: 16, y: 8 }
     }).setOrigin(0.5).setDepth(1000)
 
-    this.resetButton = this.add.text(892, 680, 'Reset', {
+    this.resetButton = this.add.text(892, STATUS_Y, 'Reset', {
       fontFamily: 'Arial Rounded MT Bold, ui-rounded, sans-serif',
       fontSize: '14px',
       color: '#7a526b',
@@ -907,7 +934,7 @@ const game = new Phaser.Game({
 })
 
 window.__DOLLHOUSE__ = {
-  version: '0.4.1',
+  version: '0.4.2',
   game,
   async resetAll() {
     await clearGameState()

vite.config.js

@@ -14,7 +14,7 @@ export default defineConfig({
         theme_color: '#f7a9c4',
         background_color: '#fff7fb',
         display: 'standalone',
-        orientation: 'landscape',
+        orientation: 'any',
         start_url: '/',
         scope: '/',
         icons: [