Canvas描画によるモンスタースプライト自動生成（ドット絵モンスター画像の追加）

## 1. 目的
現在、戦闘シーンのモンスターは名前とテキスト情報のみで表示されており、視覚的なインパクトが薄い。ドット絵RPGらしさを高めるため、外部APIやアセット素材を一切使わず、JavaScriptのCanvas APIでモンスターごとに固有のドット絵スプライトを自動生成して戦闘画面に表示する機能を追加する。指針「モンスターの画像生成」に直接対応する改善。

## 2. 具体的な仕様

### 2-1. 生成ロジック（JS側、play.phpのscriptタグ内に追記）
- 各モンスターの `sprite_id`（slime / bat / mummy / wisp / golem / wyvern / shadow_lord / ancient_dragon など）をキーにして、16×16または24×24のピクセルパターン（2次元配列で定数定義）をJSオブジェクトとして保持する。
- パターン定義がないモンスター（モンスター仲間のランダム個体など）は、モンスター名の文字コードをシードにした擬似乱数でカラーパレット（3〜4色）とシルエットを自動合成する汎用フォールバック生成器を用意する。
- `drawMonsterSprite(canvasEl, spriteId, monsterName, scale)` 関数を定義し、指定のCanvasに指定スケール（デフォルト4倍＝64×64〜96×96px）で描画する。

### 2-2. 定義するドット絵パターン（最低限）
既存enemiesのsprite_idに対応する8種を定義する。各パターンは16×16のパレットインデックス配列で表現（0=透明、1〜4=色番号）。カラーパレットもsprite_idごとに定義（例: slime=青緑系、mummy=砂色系、shadow_lord=紫黒系）。実装者がドット絵を手書き数値で埋める前提の雛形コードを提供する（各行16要素の配列×16行）。

### 2-3. 戦闘画面への組み込み（play.php）
- 戦闘シーン表示エリア（`.battle-scene`相当）に `<canvas id="monster-sprite-canvas" width="96" height="96" style="image-rendering:pixelated;">` を追加する。
- 戦闘開始・敵切り替え時（JSの戦闘状態更新処理内）に `drawMonsterSprite()` を呼び出し、現在の敵の `sprite_id` と `name` でCanvasを更新する。
- 被ダメージ時は `canvas.style.filter = 'brightness(3)'` を0.15秒適用してフラッシュ演出を付ける。
- モンスター撃破時は `canvas.style.opacity` を1から0へ0.5秒かけてフェードアウトさせる。

### 2-4. スマホ対応
- Canvasのサイズは `min(96, 画面幅の25%)` で動的調整し、CSSで `max-width:96px; width:100%` を指定する。
- スケール変数を画面幅に応じて2〜4の範囲で自動選択する。

### 2-5. PHPの変更
- `rpgsf_assets()` の enemies 配列に既に `sprite_id` フィールドが存在するため、PHPの変更は不要。
- play.phpのJSON出力で `battle.enemy.sprite_id` と `battle.enemy.name` をJSに渡している既存の仕組みをそのまま利用する。

## 3. 既存機能との整合
- Canvasの追加はHTML要素の追加のみで、既存のターン制戦闘ロジック・PHP・DBには一切手を加えない。
- `sprite_id` が未定義または空文字のときはフォールバック生成器を使うため、既存モンスターがどれも表示崩れを起こさない。
- 音響・BGM・ログ・レベルアップ演出・仲間モンスターの表示も既存動作を維持する。
- PCとスマホ両方でPixelated描画になるよう `image-rendering: pixelated; image-rendering: crisp-edges;` をCSSに追記するだけで対応完了する。