戦闘画面モンスタースプライトの「毎ターン再生成」Canvas描画システムの強化（パレット・部位・アニメーション多様化）

## 1. 目的
現在のモンスター画像生成は「戦闘開始時」に1度だけ生成される設計になっており、ターンをまたいでも同じ画像が使われ続ける。管理者指針「モンスターの画像生成を毎回行う」に応え、**ターンが進むたびに毎回モンスタースプライトを再描画**することで、戦闘に動きと緊張感を加える。

## 2. 具体的な仕様

### 2-1. ターン毎の再生成トリガー
- 攻撃・魔法・特技・アイテム使用など、プレイヤーがアクションを送信してPOSTレスポンスが返るたびに、JavaScriptの戦闘描画関数内でモンスタースプライト描画関数を再コールする。
- 再描画のたびに以下のパラメータをランダムに変化させる：
- ボディカラーの輝度オフセット（±10%）
- 目の位置・サイズの微変動（±1〜2px）
- 触手・翼・角などのオプション部位の有無をランダム切り替え（モンスタータイプに応じて）
- 影の長さ・ぼかし量の変動

### 2-2. HPに連動した外観変化
- HP 100〜51%: 通常カラーパレット
- HP 50〜26%: 傷エフェクト（ボディに赤いひび線をランダム位置に描画）
- HP 25〜1%: パレットを暗化・赤みがかった色に変化、体が小刻みに震えるCSS `animation: shake 0.3s infinite` を付与
- HP 0（撃破）: 爆発エフェクト（Canvas上で白→黄→オレンジの同心円を数フレーム描画してからCanvas消去）

### 2-3. ポーズ切り替え
現在の待機ポーズに加えて以下を追加：
- **攻撃ポーズ**: モンスターが0.3秒間プレイヤー側（左方向）に20px移動するCSSトランジション
- **被弾ポーズ**: 右方向に10px跳ね返り、赤いフラッシュオーバーレイをCanvas全面に50ms表示
- ポーズ選択ロジックは `battle_fx` の `effects` 配列を参照し、`type === 'damage'` かつ `target === 'hero'` なら攻撃ポーズ、`target === 'enemy0'` なら被弾ポーズと判断する。

### 2-4. 実装箇所
- `pages/play.php` のJavaScript内にある戦闘Canvas描画関数（既存の `drawMonster` 相当関数）を拡張。
- POSTレスポンス後に戦闘状態を再描画する既存フローの末尾で `redrawMonsterSprite(turn, hpRatio, pose)` を呼ぶ。
- `turn` はPHPから `state['turn_count']` をJSONで渡す（既存の `state_json` 出力に含まれるため追加コスト不要）。
- `hpRatio` は `battle.hp / battle.max_hp` で算出。
- `pose` は `battle_fx.effects` から判定。

## 3. 既存機能との整合（壊さない点）
- 既存の「戦闘開始時にシナリオ生成済みモンスター画像をCanvasへリアルタイム描画」する処理はそのまま残し、毎ターン再描画はその描画関数を再コールする形で上書き。
- PHP側の `state_json` 構造・DB保存・セーブスロット機能には一切変更なし。
- モンスター図鑑のCanvas表示は「初回遭遇時の画像」をスナップショットとして保存する既存ロジックを維持（毎ターン再生成の影響を受けない）。
- スマホ・PCいずれもCanvas要素を再利用するため、レイアウト崩れなし。