fix: sync mobile-safe grounded finale

src/main.js

@@ -106,6 +106,10 @@ class ForestScene extends Phaser.Scene {
 
     this.physics.add.overlap(this.player, this.groveTrigger, () => {
       if (this.mushrooms < this.totalMushrooms || this.finished) return;
+
+      const grounded = this.player.body.blocked.down || this.player.body.touching.down;
+      if (!grounded) return;
+
       this.finished = true;
       this.playerController.finish();
       this.showEnding();
@@ -454,7 +458,7 @@ class ForestScene extends Phaser.Scene {
   }
 
   createHud() {
-    const panel = this.add.rectangle(18, 18, 300, 112, 0x17271f, 0.78)
+    this.hudPanel = this.add.rectangle(18, 18, 300, 112, 0x17271f, 0.78)
       .setOrigin(0)
       .setScrollFactor(0)
       .setDepth(20)
@@ -490,6 +494,7 @@ class ForestScene extends Phaser.Scene {
     this.scale.on('resize', gameSize => {
       this.discovery.setPosition(gameSize.width / 2, 150);
       this.positionTouchControls(gameSize.width, gameSize.height);
+      if (this.endingUi) this.layoutEnding(gameSize.width, gameSize.height);
     });
   }
 
@@ -604,26 +609,83 @@ class ForestScene extends Phaser.Scene {
   }
 
   showEnding() {
-    const title = this.add.text(this.scale.width / 2, this.scale.height / 2 - 42,
-      'The Moonlit Grove remembers you.', {
-        fontFamily: 'Georgia, serif',
-        fontSize: '34px',
-        color: '#fff1bf',
-        stroke: '#15241d',
-        strokeThickness: 7,
-        align: 'center'
-      }).setOrigin(0.5).setScrollFactor(0).setDepth(50).setAlpha(0);
+    this.hudPanel?.setVisible(false);
+    this.acornText?.setVisible(false);
+    this.mushroomText?.setVisible(false);
+    this.objectiveText?.setVisible(false);
+    this.discovery?.setVisible(false);
 
-    const sub = this.add.text(this.scale.width / 2, this.scale.height / 2 + 16,
+    [this.leftBtn, this.rightBtn, this.jumpBtn].forEach(button => {
+      if (!button) return;
+      button.circle.disableInteractive();
+      button.circle.setVisible(false);
+      button.text.setVisible(false);
+    });
+
+    const shade = this.add.rectangle(0, 0, 10, 10, 0x10251d, 0.5)
+      .setOrigin(0.5)
+      .setScrollFactor(0)
+      .setDepth(48)
+      .setAlpha(0);
+
+    const panel = this.add.rectangle(0, 0, 10, 10, 0x17271f, 0.88)
+      .setOrigin(0.5)
+      .setScrollFactor(0)
+      .setDepth(49)
+      .setStrokeStyle(1, 0xf3dfaa, 0.3)
+      .setAlpha(0);
+
+    const title = this.add.text(0, 0, 'The Moonlit Grove remembers you.', {
+      fontFamily: 'Georgia, serif',
+      fontSize: '30px',
+      color: '#fff1bf',
+      stroke: '#15241d',
+      strokeThickness: 5,
+      align: 'center'
+    }).setOrigin(0.5).setScrollFactor(0).setDepth(50).setAlpha(0);
+
+    const sub = this.add.text(0, 0,
       `You found ${this.mushrooms} forest caps and ${this.acorns} acorns.\nPrototype trail complete.`, {
         fontFamily: 'Georgia, serif',
-        fontSize: '18px',
+        fontSize: '17px',
         color: '#e0eadb',
         align: 'center',
         lineSpacing: 8
       }).setOrigin(0.5).setScrollFactor(0).setDepth(50).setAlpha(0);
 
-    this.tweens.add({ targets: [title, sub], alpha: 1, duration: 900 });
+    this.endingUi = { shade, panel, title, sub };
+    this.layoutEnding(this.scale.width, this.scale.height);
+
+    this.tweens.add({
+      targets: [shade, panel, title, sub],
+      alpha: 1,
+      duration: 650
+    });
+  }
+
+  layoutEnding(width, height) {
+    if (!this.endingUi) return;
+
+    const { shade, panel, title, sub } = this.endingUi;
+    const panelWidth = Math.min(width - 36, 520);
+    const panelHeight = Math.min(210, Math.max(170, height * 0.28));
+    const titleSize = Phaser.Math.Clamp(Math.round(width * 0.052), 23, 31);
+    const subSize = Phaser.Math.Clamp(Math.round(width * 0.031), 15, 18);
+    const centreX = width / 2;
+    const centreY = height / 2;
+
+    shade.setPosition(centreX, centreY).setSize(width, height);
+    panel.setPosition(centreX, centreY).setSize(panelWidth, panelHeight);
+
+    title
+      .setPosition(centreX, centreY - panelHeight * 0.2)
+      .setFontSize(titleSize)
+      .setWordWrapWidth(panelWidth - 40, true);
+
+    sub
+      .setPosition(centreX, centreY + panelHeight * 0.18)
+      .setFontSize(subSize)
+      .setWordWrapWidth(panelWidth - 44, true);
   }
 
   update(time) {