バトル中モンスター画像のターン毎Canvas再生成：HP段階・怒り・状態異常を反映した多彩な描画バリエーション追加

## 1. 目的
現在、戦闘画面のモンスターはシナリオ生成時に1枚生成したCanvas画像を使い回している。これをターンごとにJS側でCanvasを再描画し、HP残量・状態変化・攻撃/被弾ポーズに応じた「毎回異なる外観」へ進化させる。管理者指針「モンスター画像を毎回生成」を戦闘中のリアルタイム演出として実現する。

## 2. 具体的な仕様

### 2-1. 描画トリガー
- 戦闘コマンド送信後のPOSTレスポンス受信時（`battle_fx` 適用タイミング）に `redrawMonster()` を呼び出す
- 呼び出し元は既存の `applyBattleFx()` 関数末尾に1行追加するだけでよい

### 2-2. HP段階ごとの外観変化（4段階）
| HP残量 | 外観変化 |
|---|---|
| 75%以上 | 通常カラー・正立ポーズ |
| 50〜74% | わずかに傾き（±3px translate）・目が細い |
| 25〜49% | 傷エフェクト（ランダム斜め線3〜5本）・赤みがかったパレット |
| 24%以下 | 全体暗化（globalAlpha 0.7）・震えアニメ（requestAnimationFrame 2fレート±2px揺れ） |

### 2-3. アクションポーズ（1ターン限定）
- **攻撃ターン**：モンスター画像全体を右に8px移動して描画 → 次ターンで戻す
- **被弾ターン**：赤フラッシュオーバーレイ（`rgba(255,0,0,0.35)` を `fillRect` で重ねる）
- **撃破**：globalAlpha を 1.0→0.0 に500msかけてフェードアウト後、「★撃破★」テキストをCanvas中央に描画

### 2-4. 状態異常オーバーレイ（PHPの `battle.status_effects` 配列を参照）
- `poison`：緑の粒子3〜5個をランダム座標に描画（circle r=3）
- `sleep`：上部に「zzz」テキストをゆっくり浮かせる（sin波y座標）
- `burn`：橙色の炎型ポリゴン2個をCanvas下端に描画

### 2-5. 乱数シードによるバリエーション
- 毎ターン `Math.random()` で体の輪郭に±1〜2pxのノイズを加えることで、同じモンスターでも毎回微妙に異なる形状を生成
- モンスター種別（`monster.type`）をシードとして色相（HSL hue）を固定し、乱数でsaturation/lightnessのみ変動させる

### 2-6. 実装範囲
- **変更ファイル**: `pages/play.php` 内の `<script>` ブロック（既存の `drawMonsterCanvas()` 関数を拡張）
- **追加JS関数**: `redrawMonsterCanvas(hpPct, actionType, statusEffects)` を新規追加
- `actionType` は `'idle'|'attack'|'hit'|'dead'` の文字列で、POSTレスポンスJSON内の `battle_fx.effects` から判定
- **PHP側変更なし**: 既存の `battle_fx` / `battle_result` の出力構造をそのまま利用する
- **既存機能を壊さない**: 旧 `drawMonsterCanvas()` はリネームして内部から呼び出す形にし、シナリオ生成時の初回描画は従来通り動作させる

### 2-7. スマホ対応
- Canvasサイズは既存の `monster-canvas` 要素のwidthHeight属性を維持
- 震えアニメは `prefers-reduced-motion: reduce` メディアクエリで無効化

## 3. 既存機能との整合
- モンスター図鑑の静止画はシナリオ生成時の初回画像を引き続き使用し、戦闘中の動的描画とは独立させる
- セーブ/ロード時はCanvas再描画を `onload` タイミングで `hpPct` を計算して呼び出し、ロード直後も正しい段階が表示される
- 転職・必殺技システムなど他コマンドのPOST後にも `redrawMonster()` が呼ばれるが、戦闘中でなければ早期returnで無視する