Canvas描画によるモンスタードット絵の自動生成（ルールベースピクセルアート）

## 1. 目的
現在の戦闘画面は敵の名前テキストのみで表示されており、視覚的なインパクトが薄い。PHP配列に定義された敵データをもとに、JavaScript + Canvas でルールベースのモンスタードット絵（16×16〜32×32px をアップスケール表示）を自動生成し、戦闘画面に表示することで、DQ3風のモンスター図鑑的な没入感を高める。外部APIやアセットファイルは一切不要。

## 2. 具体的な仕様

### 2-1. モンスタードット絵生成ロジック（JS側）
- `pages/play.php` の `<script>` 内に `drawMonster(canvas, monsterId, seed)` 関数を追加する。
- 各モンスターID（slime / bat / mummy / wisp / golem / wyvern / shadow_lord / ancient_dragon）に対して、**固定のドット絵データ（16×16の2次元配列＋カラーパレット）** をJSオブジェクトとして定義する（例: `MONSTER_SPRITES = { slime: { palette: ['#4488ff','#2255cc','#ffffff'], pixels: [[0,0,1,1,...], ...] } }`）。
- ピクセルデータは左右対称の16×16ドットで手書き定義（各モンスター約20〜30行のデータ）。
- Canvasに4倍スケール（64×64px表示）でピクセルを描画する。`image-rendering: pixelated` を適用。
- ボスモンスター（shadow_lord / ancient_dragon）は32×32ドット定義、128×128px表示。

### 2-2. 戦闘画面への組み込み（pages/play.php）
- 戦闘中（`$state['battle']` が存在する）の場合、`<canvas id="monsterCanvas">` を戦闘パネル上部に追加する（PHP側でモンスターIDを `data-monster-id` 属性に出力）。
- JSのDOMContentLoaded内で `drawMonster(document.getElementById('monsterCanvas'), monsterId)` を呼び出す。
- 攻撃・被ダメージ時にCanvasを短時間（200ms）点滅させるCSSアニメーション（`@keyframes monster-hit`）を追加。

### 2-3. シナリオJSON側の対応
- `lib.php` の `rpgsf_assets()` の enemies 配列に `'sprite_id'` キーを追加（例: `'sprite_id' => 'slime'`）。未定義の場合は `'default'` フォールバック用の汎用スライム形状を使用。
- 既存の enemies データ構造に1キー追加するだけで後方互換を維持。

### 2-4. レイアウト
- 戦闘パネル（`.panel.battle`）の `<h2>戦闘: 敵名</h2>` の上にCanvasを配置。
- モバイルでも `max-width: 128px; display: block; margin: 0 auto 8px;` でセンタリング。

### 2-5. フォールバック
- JS無効時はCanvasが表示されないだけで、既存テキスト表示はそのまま維持（`<noscript>` 対応不要、単純に非表示）。

## 3. 既存機能との整合
- PHPロジック・DBスキーマ・シナリオJSONフォーマットに破壊的変更なし。
- `enemies` 配列に `sprite_id` を追加するが、play.php / lib.php 内の既存ロジックはこのキーを参照しないため副作用ゼロ。
- 既存のCanvasタイルマップ描画（`#rpgMap`）とは別Canvasのため競合しない。
- パーティ編成・戦闘アクション・魔法・レベルアップ等のゲームロジックは一切変更しない。