refactor(ui): reposition stat labels and animate initiative handoff

- Adjusted `CardObject.js` to align "ATK", "ARM", "HP", and "DLY" labels horizontally next to their values instead of vertically below, improving visual clarity.
- Added `_animateInitiativeHandoff` in `BattleScene.js` to smoothly tween the initiative indicator icon between the player and opponent sides at the end of each turn.
- Updated `_updateInitiativeIndicator` to increase the icon size (110px) and adjust its X position for better visibility.

src/objects/CardObject.js

@@ -61,9 +61,9 @@ export class CardObject extends Phaser.GameObjects.Container {
     ).setOrigin(0, 0.5);
     this.add(this.atkText);
 
-    // Small "ATK" label under the number (tiny, just for clarity)
+    // Small "ATK" label — to the right of the value (assumes up to 2 digits)
     const atkLabel = this.scene.add.text(
-      -w / 2 + Math.round(5 * scale), topBannerCY + Math.round(bannerH * 0.30),
+      -w / 2 + Math.round(19 * scale), topBannerCY,
       'ATK',
       { fontSize: fs(5.5), color: '#886666' }
     ).setOrigin(0, 0.5);
@@ -77,9 +77,9 @@ export class CardObject extends Phaser.GameObjects.Container {
     ).setOrigin(1, 0.5);
     this.add(this.armText);
 
-    // Small "ARM" label
+    // Small "ARM" label — to the left of the value (assumes up to 2 digits)
     const armLabel = this.scene.add.text(
-      w / 2 - Math.round(5 * scale), topBannerCY + Math.round(bannerH * 0.30),
+      w / 2 - Math.round(19 * scale), topBannerCY,
       'ARM',
       { fontSize: fs(5.5), color: '#667799' }
     ).setOrigin(1, 0.5);
@@ -144,9 +144,9 @@ export class CardObject extends Phaser.GameObjects.Container {
     ).setOrigin(0, 0.5);
     this.add(this.hpText);
 
-    // Small "HP" label
+    // Small "HP" label — to the right of the value (assumes up to 2 digits)
     const hpLabel = this.scene.add.text(
-      -w / 2 + Math.round(5 * scale), bottomBannerCY + Math.round(bannerH * 0.30),
+      -w / 2 + Math.round(19 * scale), bottomBannerCY,
       'HP',
       { fontSize: fs(5.5), color: '#337755' }
     ).setOrigin(0, 0.5);
@@ -160,9 +160,9 @@ export class CardObject extends Phaser.GameObjects.Container {
     ).setOrigin(1, 0.5);
     this.add(this.dlyText);
 
-    // Small "DLY" label
+    // Small "DLY" label — to the left of the value (assumes up to 2 digits)
     const dlyLabel = this.scene.add.text(
-      w / 2 - Math.round(5 * scale), bottomBannerCY + Math.round(bannerH * 0.30),
+      w / 2 - Math.round(19 * scale), bottomBannerCY,
       'DLY',
       { fontSize: fs(5.5), color: '#777777' }
     ).setOrigin(1, 0.5);

src/scenes/BattleScene.js

@@ -299,6 +299,7 @@ export class BattleScene extends Phaser.Scene {
       this.isAnimating = false;
       this._updateLog();
       this.statusText.setText('Press SPACE or click Next Turn to advance');
+      this._animateInitiativeHandoff();
       if (this.engine.winner) {
         this.time.delayedCall(600, () => this._showResult());
       }
@@ -782,6 +783,18 @@ export class BattleScene extends Phaser.Scene {
     backBtn.on('pointerdown', () => this.scene.start(this.missionData ? 'CampaignScene' : 'MainMenuScene'));
   }
 
+  _animateInitiativeHandoff() {
+    if (!this.initiativeIndicator?.scene) return;
+    // playerGoesFirst still reflects the turn that just ended; next turn is the opposite
+    const targetY = this.playerGoesFirst ? 305 : 715;
+    this.tweens.add({
+      targets: this.initiativeIndicator,
+      y: targetY,
+      duration: 700,
+      ease: 'Power2.inOut'
+    });
+  }
+
   _updateInitiativeIndicator(playerGoesFirst) {
     if (this.initiativeIndicator) {
       this.initiativeIndicator.destroy();
@@ -789,10 +802,10 @@ export class BattleScene extends Phaser.Scene {
     }
     if (!this.textures.exists('attacksFirst')) return;
     // Position the indicator to the left of the commander card (commander at x=150, width=240)
-    const indicatorX = 22;
+    const indicatorX = 60;
     const indicatorY = playerGoesFirst ? 715 : 305;
     this.initiativeIndicator = this.add.image(indicatorX, indicatorY, 'attacksFirst')
-      .setDisplaySize(44, 44)
+      .setDisplaySize(110, 110)
       .setDepth(5);
   }