Improve battle unit visibility

src/game/scenes/BattleScene.ts

@@ -1076,8 +1076,11 @@ type MiniMapLayout = {
 };
 
 type UnitView = {
+  baseShadow: Phaser.GameObjects.Ellipse;
   sprite: Phaser.GameObjects.Sprite;
   label: Phaser.GameObjects.Text;
+  statusBadgeBg: Phaser.GameObjects.Rectangle;
+  statusBadgeText: Phaser.GameObjects.Text;
   textureBase: string;
   direction: UnitDirection;
   baseX: number;
@@ -3202,10 +3205,27 @@ export class BattleScene extends Phaser.Scene {
     battleUnits.forEach((unit) => {
       const sizeRatio = unit.faction === 'ally' ? 1.16 : 1.1;
       const textureBase = this.unitTextureKey(unit);
-      const sprite = this.add.sprite(this.tileCenterX(unit.x), this.tileCenterY(unit.y), textureBase, this.unitFrameIndex('south'));
+      const centerX = this.tileCenterX(unit.x);
+      const centerY = this.tileCenterY(unit.y);
+      const teamColor = this.unitTeamColor(unit);
+      const baseShadow = this.add.ellipse(
+        centerX,
+        centerY + this.layout.tileSize * 0.24,
+        this.layout.tileSize * 0.78,
+        this.layout.tileSize * 0.34,
+        0x061014,
+        0.68
+      );
+      baseShadow.setDepth(5.5);
+      baseShadow.setStrokeStyle(2, teamColor, 0.78);
+      if (this.mapMask) {
+        baseShadow.setMask(this.mapMask);
+      }
+
+      const sprite = this.add.sprite(centerX, centerY, textureBase, this.unitFrameIndex('south'));
       sprite.setName(`unit-${unit.id}`);
       sprite.setDisplaySize(this.layout.tileSize * sizeRatio, this.layout.tileSize * sizeRatio);
-      sprite.setDepth(6);
+      sprite.setDepth(8);
       if (this.mapMask) {
         sprite.setMask(this.mapMask);
       }
@@ -3220,13 +3240,37 @@ export class BattleScene extends Phaser.Scene {
         strokeThickness: 3
       });
       label.setOrigin(0.5, 0);
-      label.setDepth(7);
+      label.setDepth(10);
       if (this.mapMask) {
         label.setMask(this.mapMask);
       }
+
+      const badgePosition = this.unitStatusBadgePosition(centerX, centerY);
+      const statusBadgeBg = this.add.rectangle(badgePosition.x, badgePosition.y, 38, 16, 0x101820, 0.94);
+      statusBadgeBg.setOrigin(0.5);
+      statusBadgeBg.setDepth(10);
+      statusBadgeBg.setStrokeStyle(1, palette.gold, 0.86);
+      const statusBadgeText = this.add.text(badgePosition.x, badgePosition.y - 1, '완료', {
+        fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
+        fontSize: '10px',
+        color: '#f4dfad',
+        stroke: '#05070a',
+        strokeThickness: 2,
+        fontStyle: '700'
+      });
+      statusBadgeText.setOrigin(0.5);
+      statusBadgeText.setDepth(11);
+      if (this.mapMask) {
+        statusBadgeBg.setMask(this.mapMask);
+        statusBadgeText.setMask(this.mapMask);
+      }
+
       const view = {
+        baseShadow,
         sprite,
         label,
+        statusBadgeBg,
+        statusBadgeText,
         textureBase,
         direction: 'south' as UnitDirection,
         baseX: sprite.x,
@@ -3236,6 +3280,7 @@ export class BattleScene extends Phaser.Scene {
       };
       this.unitViews.set(unit.id, view);
       this.syncUnitMotion(unit, view);
+      this.applyUnitLegibilityStyle(unit, view);
     });
   }
 
@@ -3498,9 +3543,77 @@ export class BattleScene extends Phaser.Scene {
     this.setUnitBasePosition(view, this.tileCenterX(unit.x), this.tileCenterY(unit.y));
     view.label.setPosition(view.baseX, view.baseY + this.layout.tileSize * 0.52);
     const visible = this.isTileVisible(unit.x, unit.y);
+    view.baseShadow.setVisible(visible);
     view.sprite.setVisible(visible);
     view.label.setVisible(visible);
+    view.statusBadgeBg.setVisible(visible);
+    view.statusBadgeText.setVisible(visible);
     this.syncUnitMotion(unit, view);
+    this.applyUnitLegibilityStyle(unit, view);
+  }
+
+  private unitTeamColor(unit: UnitData) {
+    return unit.faction === 'ally' ? 0x83c8ff : 0xff8a72;
+  }
+
+  private unitBaseShadowPosition(x: number, y: number) {
+    return {
+      x,
+      y: y + this.layout.tileSize * 0.24
+    };
+  }
+
+  private unitStatusBadgePosition(x: number, y: number) {
+    return {
+      x: x + this.layout.tileSize * 0.32,
+      y: y - this.layout.tileSize * 0.43
+    };
+  }
+
+  private positionUnitViewDecorations(view: UnitView) {
+    const shadowPosition = this.unitBaseShadowPosition(view.baseX, view.baseY);
+    const badgePosition = this.unitStatusBadgePosition(view.baseX, view.baseY);
+    view.baseShadow.setPosition(shadowPosition.x, shadowPosition.y);
+    view.statusBadgeBg.setPosition(badgePosition.x, badgePosition.y);
+    view.statusBadgeText.setPosition(badgePosition.x, badgePosition.y - 1);
+  }
+
+  private refreshUnitLegibilityStyles() {
+    battleUnits.forEach((unit) => this.applyUnitLegibilityStyle(unit));
+  }
+
+  private applyUnitLegibilityStyle(unit: UnitData, view = this.unitViews.get(unit.id)) {
+    if (!view) {
+      return;
+    }
+
+    const visible = this.isTileVisible(unit.x, unit.y);
+    const selected = this.selectedUnit?.id === unit.id && unit.hp > 0;
+    const acted = this.actedUnitIds.has(unit.id) && unit.hp > 0;
+    const teamColor = this.unitTeamColor(unit);
+
+    view.baseShadow.setVisible(visible);
+    view.baseShadow.setFillStyle(selected ? 0x111a22 : 0x061014, selected ? 0.86 : acted ? 0.76 : 0.68);
+    view.baseShadow.setStrokeStyle(selected ? 3 : 2, selected ? palette.gold : teamColor, selected ? 1 : acted ? 0.94 : 0.78);
+
+    view.statusBadgeBg.setVisible(visible && acted);
+    view.statusBadgeText.setVisible(visible && acted);
+
+    if (unit.hp <= 0) {
+      return;
+    }
+
+    view.sprite.postFX.clear();
+    view.sprite.clearTint();
+    view.sprite.setAlpha(acted ? 0.94 : 1);
+    if (acted) {
+      view.sprite.setTint(0xd8cfb5);
+    }
+
+    view.label.setVisible(visible);
+    view.label.setAlpha(1);
+    view.label.setColor(acted ? '#f4dfad' : unit.faction === 'ally' ? '#e7edf7' : '#ffebe7');
+    view.label.setBackgroundColor(acted ? 'rgba(16,24,32,0.78)' : '');
   }
 
   private isTileVisible(x: number, y: number) {
@@ -3570,6 +3683,7 @@ export class BattleScene extends Phaser.Scene {
       this.pendingMove = undefined;
       this.phase = 'idle';
       this.hideCommandMenu();
+      this.refreshUnitLegibilityStyles();
       this.showEnemyUnitThreatRange(unit);
       this.renderUnitDetail(unit, this.enemyDetailMessage(unit));
       return;
@@ -3585,6 +3699,7 @@ export class BattleScene extends Phaser.Scene {
       this.clearMarkers();
       this.hideCommandMenu();
       this.phase = 'idle';
+      this.refreshUnitLegibilityStyles();
       this.renderUnitDetail(unit, '이미 행동을 마친 장수입니다.');
       return;
     }
@@ -3595,6 +3710,7 @@ export class BattleScene extends Phaser.Scene {
     this.clearMarkers();
     this.hideCommandMenu();
     this.showMoveRange(unit);
+    this.refreshUnitLegibilityStyles();
     this.renderUnitDetail(unit, '이동할 파란 칸을 선택하세요.');
   }
 
@@ -4347,29 +4463,50 @@ export class BattleScene extends Phaser.Scene {
         this.layout.tileSize,
         this.layout.tileSize,
         0xc93b30,
-        0.3
+        0.2
       );
       marker.setData('tileX', target.x);
       marker.setData('tileY', target.y);
       marker.setOrigin(0);
       marker.setStrokeStyle(2, 0xffd27a, 0.9);
-      marker.setDepth(9);
+      marker.setDepth(5.05);
       if (this.mapMask) {
         marker.setMask(this.mapMask);
       }
       marker.setVisible(this.isTileVisible(target.x, target.y));
-      marker.setInteractive({ useHandCursor: true });
-      marker.on('pointerover', () => {
-        marker.setFillStyle(0xd9503f, 0.44);
+
+      const hitArea = this.add.rectangle(
+        this.tileTopLeftX(target.x),
+        this.tileTopLeftY(target.y),
+        this.layout.tileSize,
+        this.layout.tileSize,
+        0xffffff,
+        0.001
+      );
+      hitArea.setData('tileX', target.x);
+      hitArea.setData('tileY', target.y);
+      hitArea.setOrigin(0);
+      hitArea.setDepth(11);
+      if (this.mapMask) {
+        hitArea.setMask(this.mapMask);
+      }
+      hitArea.setVisible(this.isTileVisible(target.x, target.y));
+      hitArea.setInteractive({ useHandCursor: true });
+      hitArea.on('pointerover', () => {
+        marker.setFillStyle(0xd9503f, 0.34);
+        marker.setStrokeStyle(3, 0xffe19a, 1);
         this.renderAttackPreview(preview);
       });
-      marker.on('pointerout', () => marker.setFillStyle(0xc93b30, 0.3));
-      marker.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
+      hitArea.on('pointerout', () => {
+        marker.setFillStyle(0xc93b30, 0.2);
+        marker.setStrokeStyle(2, 0xffd27a, 0.9);
+      });
+      hitArea.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
         if (pointer.leftButtonDown()) {
           void this.tryResolveDamageTarget(attacker, target, action, usable);
         }
       });
-      this.markers.push(marker);
+      this.markers.push(marker, hitArea);
     });
   }
 
@@ -4381,29 +4518,50 @@ export class BattleScene extends Phaser.Scene {
         this.layout.tileSize,
         this.layout.tileSize,
         usable.effect === 'heal' ? 0x45b875 : 0x4f86d9,
-        0.3
+        0.2
       );
       marker.setData('tileX', target.x);
       marker.setData('tileY', target.y);
       marker.setOrigin(0);
       marker.setStrokeStyle(2, usable.effect === 'heal' ? 0xb6ffd2 : 0xd9e8ff, 0.9);
-      marker.setDepth(9);
+      marker.setDepth(5.05);
       if (this.mapMask) {
         marker.setMask(this.mapMask);
       }
       marker.setVisible(this.isTileVisible(target.x, target.y));
-      marker.setInteractive({ useHandCursor: true });
-      marker.on('pointerover', () => {
-        marker.setFillStyle(usable.effect === 'heal' ? 0x45b875 : 0x4f86d9, 0.44);
+
+      const hitArea = this.add.rectangle(
+        this.tileTopLeftX(target.x),
+        this.tileTopLeftY(target.y),
+        this.layout.tileSize,
+        this.layout.tileSize,
+        0xffffff,
+        0.001
+      );
+      hitArea.setData('tileX', target.x);
+      hitArea.setData('tileY', target.y);
+      hitArea.setOrigin(0);
+      hitArea.setDepth(11);
+      if (this.mapMask) {
+        hitArea.setMask(this.mapMask);
+      }
+      hitArea.setVisible(this.isTileVisible(target.x, target.y));
+      hitArea.setInteractive({ useHandCursor: true });
+      hitArea.on('pointerover', () => {
+        marker.setFillStyle(usable.effect === 'heal' ? 0x45b875 : 0x4f86d9, 0.34);
+        marker.setStrokeStyle(3, usable.effect === 'heal' ? 0xd9ffe8 : 0xf2f7ff, 1);
         this.renderSupportPreview(user, target, usable);
       });
-      marker.on('pointerout', () => marker.setFillStyle(usable.effect === 'heal' ? 0x45b875 : 0x4f86d9, 0.3));
-      marker.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
+      hitArea.on('pointerout', () => {
+        marker.setFillStyle(usable.effect === 'heal' ? 0x45b875 : 0x4f86d9, 0.2);
+        marker.setStrokeStyle(2, usable.effect === 'heal' ? 0xb6ffd2 : 0xd9e8ff, 0.9);
+      });
+      hitArea.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
         if (pointer.leftButtonDown()) {
           void this.tryResolveSupportTarget(user, target, usable);
         }
       });
-      this.markers.push(marker);
+      this.markers.push(marker, hitArea);
     });
   }
 
@@ -4496,7 +4654,7 @@ export class BattleScene extends Phaser.Scene {
     const height = 124;
     const y = Math.min(this.sideContentTop() + 430, this.sideContentBottom(10) - height);
 
-    const bg = this.trackSideObject(this.add.rectangle(left, y, width, height, 0x121a22, 0.96));
+    const bg = this.trackSideObject(this.add.rectangle(left, y, width, height, 0x121a22, 0.98));
     bg.setOrigin(0);
     bg.setStrokeStyle(2, palette.gold, 0.72);
 
@@ -4539,7 +4697,7 @@ export class BattleScene extends Phaser.Scene {
   }
 
   private renderPreviewEquipmentChip(x: number, y: number, width: number, icon: BattleUiIconKey, label: string) {
-    const chip = this.trackSideObject(this.add.rectangle(x, y, width, 22, 0x0b1118, 0.86));
+    const chip = this.trackSideObject(this.add.rectangle(x, y, width, 22, 0x0b1118, 0.94));
     chip.setOrigin(0);
     chip.setStrokeStyle(1, 0x53606c, 0.42);
     this.trackSideIcon(x + 12, y + 11, icon, 18);
@@ -4572,7 +4730,7 @@ export class BattleScene extends Phaser.Scene {
     if (maxRight && x + width > maxRight) {
       return x;
     }
-    const badge = this.trackSideObject(this.add.rectangle(x, y, width, 20, 0x0b1118, 0.88));
+    const badge = this.trackSideObject(this.add.rectangle(x, y, width, 20, 0x0b1118, 0.94));
     badge.setOrigin(0);
     badge.setStrokeStyle(1, 0x53606c, 0.44);
     this.trackSideIcon(x + 11, y + 10, icon, 15);
@@ -4662,6 +4820,7 @@ export class BattleScene extends Phaser.Scene {
     this.hideTurnEndPrompt();
     this.hideBattleAlert();
     this.hideBattleEventBanner();
+    this.refreshUnitLegibilityStyles();
     this.updateObjectiveTracker();
 
     const message =
@@ -6424,6 +6583,7 @@ export class BattleScene extends Phaser.Scene {
     this.hideCommandMenu();
     this.hideTurnEndPrompt();
     this.hideMapMenu();
+    this.refreshUnitLegibilityStyles();
     this.renderTerrainDetail(tile.x, tile.y);
   }
 
@@ -6458,6 +6618,7 @@ export class BattleScene extends Phaser.Scene {
     this.selectedUnit = undefined;
     this.pendingMove = undefined;
     this.phase = 'idle';
+    this.refreshUnitLegibilityStyles();
 
     const actions: MapMenuAction[] = ['endTurn', 'threat', 'save', 'load', 'roster', 'bond', 'situation', 'bgm', 'close'];
     const menuWidth = 148;
@@ -6867,7 +7028,7 @@ export class BattleScene extends Phaser.Scene {
       return;
     }
 
-    this.tweens.killTweensOf([view.sprite, view.label]);
+    this.tweens.killTweensOf([view.baseShadow, view.sprite, view.label, view.statusBadgeBg, view.statusBadgeText]);
     view.direction = direction;
     this.setUnitBasePosition(view, this.tileCenterX(unit.x), this.tileCenterY(unit.y));
     this.resetUnitSpritePose(view);
@@ -6875,6 +7036,7 @@ export class BattleScene extends Phaser.Scene {
     if (unit.hp > 0) {
       view.sprite.setInteractive({ useHandCursor: true });
     }
+    this.applyUnitLegibilityStyle(unit, view);
   }
 
   private cloneEquipment(equipment: UnitData['equipment']) {
@@ -6945,6 +7107,7 @@ export class BattleScene extends Phaser.Scene {
     this.clearMarkers();
     this.hideCommandMenu();
     this.hideTurnEndPrompt();
+    this.refreshUnitLegibilityStyles();
 
     this.activeFaction = 'enemy';
     this.updateTurnText();
@@ -8961,6 +9124,7 @@ export class BattleScene extends Phaser.Scene {
       view.sprite.setAlpha(1);
       if (unit) {
         this.syncUnitMotion(unit, view);
+        this.applyUnitLegibilityStyle(unit, view);
       } else {
         this.stopUnitWalk(view, view.direction);
       }
@@ -9366,6 +9530,7 @@ export class BattleScene extends Phaser.Scene {
     this.hideCommandMenu();
     this.hideTurnEndPrompt();
     this.updateMiniMap();
+    this.refreshUnitLegibilityStyles();
     soundDirector.playSelect();
 
     this.moveUnitView(unit, fromX, fromY, view, 180, toX, toY);
@@ -9398,10 +9563,11 @@ export class BattleScene extends Phaser.Scene {
     const direction = this.directionFromDelta(x - fromX, y - fromY);
     const movementDistance = this.movementTileDistanceFrom(fromX, fromY, x, y);
     const movementDuration = this.movementDuration(duration, movementDistance);
-    this.tweens.killTweensOf([view.sprite, view.label]);
+    this.tweens.killTweensOf([view.baseShadow, view.sprite, view.label, view.statusBadgeBg, view.statusBadgeText]);
     this.setUnitBasePosition(view, startX, startY);
     this.resetUnitSpritePose(view);
     view.label.setPosition(startX, startY + this.layout.tileSize * 0.52);
+    this.positionUnitViewDecorations(view);
     this.playMovementSound(unit, movementDuration, movementDistance);
     this.playUnitWalk(view, direction);
     this.tweens.add({
@@ -9424,6 +9590,29 @@ export class BattleScene extends Phaser.Scene {
       duration: movementDuration,
       ease: 'Sine.easeInOut'
     });
+    const targetShadowPosition = this.unitBaseShadowPosition(targetX, targetY);
+    this.tweens.add({
+      targets: view.baseShadow,
+      x: targetShadowPosition.x,
+      y: targetShadowPosition.y,
+      duration: movementDuration,
+      ease: 'Sine.easeInOut'
+    });
+    const targetBadgePosition = this.unitStatusBadgePosition(targetX, targetY);
+    this.tweens.add({
+      targets: view.statusBadgeBg,
+      x: targetBadgePosition.x,
+      y: targetBadgePosition.y,
+      duration: movementDuration,
+      ease: 'Sine.easeInOut'
+    });
+    this.tweens.add({
+      targets: view.statusBadgeText,
+      x: targetBadgePosition.x,
+      y: targetBadgePosition.y - 1,
+      duration: movementDuration,
+      ease: 'Sine.easeInOut'
+    });
   }
 
   private movementTileDistance(unit: UnitData, x: number, y: number) {
@@ -9613,6 +9802,7 @@ export class BattleScene extends Phaser.Scene {
     view.baseX = x;
     view.baseY = y;
     view.sprite.setPosition(x, y);
+    this.positionUnitViewDecorations(view);
   }
 
   private resetUnitSpritePose(view: UnitView) {
@@ -9879,11 +10069,8 @@ export class BattleScene extends Phaser.Scene {
 
     view.sprite.postFX.clear();
     view.sprite.clearTint();
-    view.sprite.setAlpha(1);
     this.syncUnitMotion(unit, view);
-    view.label.setAlpha(1);
-    view.label.setColor(unit.faction === 'ally' ? '#e7edf7' : '#ffebe7');
-    view.label.setBackgroundColor('');
+    this.applyUnitLegibilityStyle(unit, view);
   }
 
   private applyDefeatedStyle(unit: UnitData) {
@@ -9896,10 +10083,15 @@ export class BattleScene extends Phaser.Scene {
     view.sprite.disableInteractive();
     view.sprite.postFX.clear();
     view.sprite.postFX.addColorMatrix().grayscale(1);
-    view.sprite.setAlpha(0.22);
-    view.sprite.setTint(0x4f4f4f);
-    view.label.setAlpha(0.3);
-    view.label.setColor('#8a8a8a');
+    view.sprite.setAlpha(0.48);
+    view.sprite.setTint(0x6f6f6f);
+    view.baseShadow.setFillStyle(0x05070a, 0.5);
+    view.baseShadow.setStrokeStyle(2, 0x6d6d6d, 0.68);
+    view.statusBadgeBg.setVisible(false);
+    view.statusBadgeText.setVisible(false);
+    view.label.setAlpha(0.62);
+    view.label.setColor('#b6b6b6');
+    view.label.setBackgroundColor('rgba(8,10,12,0.72)');
   }
 
   private faceUnitToward(unit: UnitData, target: UnitData) {
@@ -9936,6 +10128,7 @@ export class BattleScene extends Phaser.Scene {
       } else {
         view.sprite.clearTint();
         this.syncUnitMotion(unit, view);
+        this.applyUnitLegibilityStyle(unit, view);
       }
     });
 
@@ -10495,7 +10688,7 @@ export class BattleScene extends Phaser.Scene {
     const acted = this.actedUnitIds.has(unit.id);
     const active = this.selectedUnit?.id === unit.id;
     const unitClass = getUnitClass(unit.classKey);
-    const rowBg = this.trackSideObject(this.add.rectangle(x, y, width, 42, active ? 0x2f4050 : 0x101820, acted ? 0.54 : 0.9));
+    const rowBg = this.trackSideObject(this.add.rectangle(x, y, width, 42, active ? 0x2f4050 : 0x101820, acted ? 0.82 : 0.94));
     rowBg.setOrigin(0);
     rowBg.setStrokeStyle(1, active ? palette.gold : unit.faction === 'ally' ? palette.blue : 0xb86b55, active ? 0.88 : 0.52);
     rowBg.setInteractive({ useHandCursor: true });
@@ -10512,13 +10705,13 @@ export class BattleScene extends Phaser.Scene {
     {
       fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
       fontSize: '14px',
-      color: acted ? '#8c8c8c' : '#9fb0bf'
+      color: acted ? '#b7bec8' : '#9fb0bf'
     }));
 
     const hpText = this.trackSideObject(this.add.text(x + width - 12, y + 7, `${unit.hp}/${unit.maxHp}`, {
       fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
       fontSize: '16px',
-      color: acted ? '#9a9a9a' : '#f0e4c8',
+      color: acted ? '#d8cfb5' : '#f0e4c8',
       fontStyle: '700'
     }));
     hpText.setOrigin(1, 0);
@@ -10531,7 +10724,7 @@ export class BattleScene extends Phaser.Scene {
         fontSize: '12px',
         color: '#bdbdbd'
       }));
-      actedText.setAlpha(0.78);
+      actedText.setAlpha(0.95);
     }
   }
 
@@ -10556,7 +10749,7 @@ export class BattleScene extends Phaser.Scene {
     header.setStrokeStyle(1, factionColor, 0.76);
 
     const classIcon = this.trackSideIcon(left + 23, top + 31, this.unitMoveIcon(unit), 30);
-    classIcon.setAlpha(acted ? 0.55 : 0.94);
+    classIcon.setAlpha(acted ? 0.86 : 0.96);
     const headerTextX = left + 48;
     this.trackSideObject(this.add.text(headerTextX, top + 9, `${rosterLabels[unit.faction]} / ${unitClass.family}`, {
       fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
@@ -10573,7 +10766,7 @@ export class BattleScene extends Phaser.Scene {
     const growthText = this.trackSideObject(this.add.text(left + width - 14, top + 42, `Lv ${unit.level}  EXP ${unit.exp}/100`, {
       fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
       fontSize: '13px',
-      color: acted ? '#a8a8a8' : '#f4dfad',
+      color: acted ? '#d8cfb5' : '#f4dfad',
       fontStyle: '700'
     }));
     growthText.setOrigin(1, 0);
@@ -10664,7 +10857,7 @@ export class BattleScene extends Phaser.Scene {
     const item = getItem(state.itemId);
     const next = equipmentExpToNext(state.level);
     const isTreasure = item.rank === 'treasure';
-    const bg = this.trackSideObject(this.add.rectangle(x, y, width, 29, isTreasure ? 0x1f2430 : 0x101820, isTreasure ? 0.94 : 0.86));
+    const bg = this.trackSideObject(this.add.rectangle(x, y, width, 29, isTreasure ? 0x1f2430 : 0x101820, isTreasure ? 0.96 : 0.92));
     bg.setOrigin(0);
     bg.setStrokeStyle(1, isTreasure ? palette.gold : 0x53606c, isTreasure ? 0.58 : 0.42);
 
@@ -10815,9 +11008,9 @@ export class BattleScene extends Phaser.Scene {
   }
 
   private renderCompactValueBox(x: number, y: number, width: number, icon: BattleUiIconKey, label: string, value: string) {
-    const bg = this.trackSideObject(this.add.rectangle(x, y, width, 38, 0x16212d, 0.92));
+    const bg = this.trackSideObject(this.add.rectangle(x, y, width, 38, 0x16212d, 0.96));
     bg.setOrigin(0);
-    bg.setStrokeStyle(1, 0x53606c, 0.56);
+    bg.setStrokeStyle(1, 0x647485, 0.72);
     this.trackSideIcon(x + 13, y + 17, icon, 18);
     this.trackSideObject(this.add.text(x + 25, y + 6, label, {
       fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
@@ -10854,7 +11047,7 @@ export class BattleScene extends Phaser.Scene {
   }
 
   private drawGauge(x: number, y: number, width: number, height: number, ratio: number, color: number) {
-    const track = this.trackSideObject(this.add.rectangle(x, y, width, height, 0x0a0f14, 0.82));
+    const track = this.trackSideObject(this.add.rectangle(x, y, width, height, 0x0a0f14, 0.94));
     track.setOrigin(0);
     track.setStrokeStyle(1, 0x40515e, 0.58);
 
@@ -10865,9 +11058,9 @@ export class BattleScene extends Phaser.Scene {
 
   private renderPanelMessage(text: string, x: number, y: number, width: number, height = 74) {
     const safeY = Math.max(this.sideContentTop(), Math.min(y, this.sideContentBottom() - height));
-    const bg = this.trackSideObject(this.add.rectangle(x, safeY, width, height, 0x101820, 0.82));
+    const bg = this.trackSideObject(this.add.rectangle(x, safeY, width, height, 0x101820, 0.94));
     bg.setOrigin(0);
-    bg.setStrokeStyle(1, 0x53606c, 0.42);
+    bg.setStrokeStyle(1, 0x647485, 0.66);
     const messageText = this.trackSideObject(this.add.text(x + 12, safeY + 10, text, {
       fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
       fontSize: height < 60 ? '13px' : '15px',
@@ -10885,6 +11078,7 @@ export class BattleScene extends Phaser.Scene {
     this.phase = 'idle';
     this.clearMarkers();
     this.hideCommandMenu();
+    this.refreshUnitLegibilityStyles();
     this.renderRosterPanel(tab);
   }