戦闘画面・マップ画面への生成モンスター画像表示（Canvas埋め込み型スプライト）

## 1. 目的
現在のモンスター表示はCanvas手描きベースのドット絵だが、モンスター種別ごとの個性が視覚的に伝わりにくい。生成した高品質なモンスター画像をCanvasに描画することで、戦闘画面の没入感を大幅に向上させる。既存のCanvas描画ロジックを壊さず、画像ロード失敗時はフォールバックとして現行のドット絵描画に自動切替する方式で実装する。

## 2. 具体的な仕様

### 2-1. 画像アセット配置
- `/assets/monsters/` ディレクトリを新設し、以下のモンスター種別に対応する画像ファイルを配置する
- ファイル名は `{monster_id}.png` 形式（例: `slime.png`, `dragon.png`, `skeleton.png` 等）
- 画像サイズは 128×128px 推奨（Canvas拡大描画対応）
- 生成対象モンスター: スライム、ゴブリン、スケルトン、ドラゴン、魔王、精霊、ゾンビ、ウルフ、サボテン、オクトパス（lib.phpの既存モンスター配列に合わせた種別）

### 2-2. Canvas描画ロジックの修正（play.phpのJS部分）
- 既存の `drawMonster()` または相当するCanvas描画関数の先頭に画像描画処理を追加
- `const monsterImages = {}` キャッシュオブジェクトを用意し、初回ロード時に `new Image()` で非同期取得
- 画像がロード済みの場合: `ctx.drawImage(img, x, y, w, h)` でCanvasに描画
- 画像ロード失敗（onerror）の場合: 既存のドット絵描画処理にフォールバック
- HPが50%以下になったら `ctx.globalAlpha = 0.7` + 赤みフィルタ（`ctx.fillStyle='rgba(255,0,0,0.15)'` の矩形オーバーレイ）で被ダメージ状態を表現
- 撃破時は `ctx.globalAlpha` を0までアニメーションで下げて消滅エフェクト（既存の撃破演出と連携）

### 2-3. lib.phpのモンスター配列との紐付け
- 既存モンスターデータの各エントリに `'image_id'` キーを追加（例: `'image_id' => 'slime'`）
- シナリオJSONに `monster.image_id` が含まれるようにする（なければmonster.idで代替）
- play.phpのPHP側で `$scenario['monsters']` から `image_id` を取り出し、JSに渡す

### 2-4. マップ画面への適用
- ミニマップ上のモンスターシンボル（現在は文字/色付きドット）を、16×16に縮小した同画像で置き換える
- Canvas描画時に `ctx.drawImage(img, mapX, mapY, 16, 16)` で描画、ロード失敗時は既存シンボルを維持

### 2-5. スマホ対応
- 戦闘Canvasの横幅をビューポート幅に追従させる既存レスポンシブ処理を維持
- 画像は `object-fit: contain` 相当の比率でCanvas内に収める（横幅最大化時も縦横比を保持）

## 3. 既存機能との整合
- 既存のCanvas手描きドット絵コードは削除せず、画像ロード失敗時のフォールバックとして残す
- HP/MP/EXPゲージHUD、アイテムドロップ演出、天気エフェクトなど既存のCanvas重ね描き処理は変更しない
- モンスター図鑑パネルにも同画像を表示する（`<img src='/assets/monsters/{image_id}.png'>` で参照）
- PHPのscenario_json生成ロジック（lib.php内のrpgsf_create_scenario）には最小限の`image_id`追加のみで対応

## 4. 実装規模の見積もり
- lib.php: モンスター配列に`image_id`追加（+10行程度）
- play.php JS: drawMonster関数の修正と画像キャッシュ追加（+60行程度）
- 画像アセット: 10種類のモンスター画像生成・配置
- 合計: 1サイクルで完成する現実的な規模