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

## 1. 目的
現在、戦闘画面のモンスターはテキスト名のみで表示されており、視覚的なインパクトが薄い。ドット絵RPGとしての没入感を高めるため、外部APIや画像ファイル不要で、JavaScriptのCanvas APIを使いモンスターIDごとにルールベースでドット絵スプライトをリアルタイム描画する仕組みを追加する。

## 2. 具体的な仕様

### 2-1. 描画エンジン (monster_sprite.js)
- `monster_sprite.js` を新規作成し、play.phpのフッター付近で読み込む
- `MonsterSprite.draw(canvasEl, spriteId, scale)` 関数を公開
- spriteId は既存assets['enemies']の `sprite_id` フィールド (`slime`, `bat`, `mummy`, `wisp`, `golem`, `wyvern`, `shadow_lord`, `ancient_dragon` など) を使用
- 各spriteIdに対応する 16×16 ピクセルのドット絵データを、16進数カラーの2次元配列 (パレット参照方式) としてJSオブジェクトにハードコード
- 例: slime = 青ベースの丸い形、bat = 黒い羽型、mummy = ベージュの包帯型、wisp = 半透明の炎型、golem = グレーの岩型、wyvern = 緑の翼竜型、shadow_lord = 紫の人影型
- 未定義のspriteIdは汎用クエスチョンマーク型フォールバックを描画
- `scale` 引数 (デフォルト3) でCanvas出力サイズを 16*scale × 16*scale にする (スマホ: scale=3→48px、PC: scale=5→80px)
- `MonsterSprite.animate(canvasEl, spriteId, scale)` で2フレームのパラパラアニメ (300msごとに上下2px揺らす) を実装しsetIntervalで動作

### 2-2. 戦闘画面への組み込み (play.php)
- 既存の戦闘シーン描画部分 (battle セクション) に `<canvas id="monster-sprite-canvas" width="48" height="48" style="image-rendering:pixelated;">` を追加
- PHPで `$battle_enemy_sprite_id` を `$state['battle']['enemy']['sprite_id'] ?? 'unknown'` から取得し、data属性として `data-sprite-id="<?= h($battle_enemy_sprite_id) ?>"` をcanvasに付与
- DOMContentLoaded時に `MonsterSprite.animate(canvas, canvas.dataset.spriteId, window.innerWidth < 600 ? 3 : 5)` を呼び出す
- 戦闘終了 (勝利/敗北) 時はanimateのsetIntervalをクリアする

### 2-3. モンスター図鑑への組み込み (既存機能との整合)
- 既存のモンスター図鑑モーダルの各エントリに同様のcanvasを追加し、`MonsterSprite.draw(canvas, spriteId, 3)` で静止画を描画
- 未遭遇モンスターは `?` スプライトを描画し、名前をシルエット表示 (既存の未遭遇判定ロジックを流用)

### 2-4. データ構造・後方互換
- 既存のPHP側 `sprite_id` フィールドはすでにassets配列に存在するため、PHP側変更不要
- `monster_sprite.js` の追加のみで完結し、既存の戦闘ロジック・状態管理・DB構造は一切変更しない
- JS読み込みに失敗しても `<canvas>` 要素が空白になるだけで、戦闘テキストや操作には影響なし

### 2-5. スタイル
- canvasはSFC風UIに合わせて `border: 2px solid #ffe066; background: #1a1a2e; display:block; margin: 8px auto;` を適用
- スマホ時は戦闘パネルの上部中央、PC時は戦闘パネルの右上に配置 (既存のflex/gridレイアウトを崩さない)