プレイヤー・仲間キャラクターのドット絵スプライト自動生成（Canvas描画）

## 1. 目的
現在、モンスターのドット絵はCanvas生成済みだが、プレイヤー（主人公・仲間）のキャラクタースプライトはテキスト記号のみで表示されている。職業・性格・転職情報をもとにCanvas上で16×16〜32×32のドット絵キャラクタースプライトを自動生成し、マップ上の自キャラ表示・ステータス画面・戦闘画面をリッチ化する。

## 2. 具体的な仕様

### 2-1. スプライト生成関数（JS）
`generateCharaSprite(config)` を `play.php` インラインスクライプに追加する。

**config オブジェクト:**
```js
{
job: 'warrior' | 'mage' | 'priest' | 'thief' | 'merchant' | 'soldier',
personality_id: 'brave' | 'clever' | 'sturdy' | 'reckless' | 'lucky' | 'normal',
job_changed: true | false, // 転職済みか
is_hero: true | false,
size: 16 | 32 // px
}
```

**描画ルール（16×16ベース、2倍拡大で32×32表示）:**
- **頭部（上4行）:** 職業ごとに固定パレット。warrior=赤兜、mage=青フード、priest=白帽子、thief=緑バンダナ、merchant=茶帽子、soldier=灰兜
- **顔（5〜8行）:** 肌色ベース。性格でアクセント追加（brave=赤ほっぺ、clever=眼鏡ドット、lucky=星マーク）
- **胴体（9〜13行）:** 職業カラーのローブ/鎧。転職済みの場合は肩に金ドットを追加
- **足（14〜16行）:** 黒or茶のブーツ
- 主人公は頭部に小さな王冠ドット（2×2px）を追加

**カラーパレット（職業別）:**
```js
const JOB_COLORS = {
warrior: { helm: '#c0392b', body: '#922b21', trim: '#e74c3c' },
mage: { helm: '#2471a3', body: '#1a5276', trim: '#5dade2' },
priest: { helm: '#f0f0f0', body: '#d0d0d0', trim: '#f9e79f' },
thief: { helm: '#1e8449', body: '#196f3d', trim: '#58d68d' },
merchant: { helm: '#784212', body: '#6e2f1a', trim: '#f0b27a' },
soldier: { helm: '#717d7e', body: '#566573', trim: '#aab7b8' },
};
```

### 2-2. 描画実装（ピクセルマップ方式）
各職業ごとに16×16のピクセル定義配列（0=透明, 1=ヘルム色, 2=ボディ色, 3=トリム色, 4=肌色, 5=黒, 6=白）を定義する。`generateCharaSprite` はoffscreen Canvasに `fillRect(x*scale, y*scale, scale, scale)` で描画し、`canvas.toDataURL()` を返す。

### 2-3. 表示箇所

**① マップ上のプレイヤーアイコン**
- 現在 `@` 記号で表示している箇所を、`<canvas id="player-sprite" width="16" height="16">` に置き換える
- マップタイル上に `position:absolute` でオーバーレイ表示（16×16px）
- ページロード時に `generateCharaSprite({job, personality_id, job_changed, is_hero:true, size:16})` を呼び出して描画

**② ステータスカード（サイドパネル）**
- 各キャラのステータスカード左端に 32×32 のスプライト画像を追加
- `<canvas class="chara-sprite" width="32" height="32" data-job="..." data-personality="..." data-jobchanged="0|1" data-ishero="0|1">` として出力し、JS初期化時に一括描画

**③ 戦闘画面（味方側）**
- 戦闘シーンの味方表示エリア（現在テキストのみ）に 32×32 スプライトを横並びで追加
- モンスタースプライト（既存）と左右対称に配置し、SFC風バトル画面の見た目を完成させる

### 2-4. アニメーション（軽量）
- マップ上のプレイヤースプライトに歩行アニメを追加（2フレーム切替）
- 移動イベント後にJSで `classList.add('walking')` → 300ms後に削除
- CSSで `@keyframes chara-walk { 0%{transform:translateY(0)} 50%{transform:translateY(-2px)} 100%{transform:translateY(0)} }` を適用

### 2-5. PHP側の変更
- `play.php` の `$status_cards` 配列に `job`・`personality_id`・`job_changed`（bool）・`is_hero`（bool）を追加出力（既に大部分は含まれているため最小変更）
- `data-*` 属性としてHTMLに埋め込み、JS側で読み取る

## 3. 既存機能との整合（壊さない点）
- モンスタースプライト生成（既存）とは独立したJS関数として実装するため干渉しない
- スプライトCanvasはあくまで装飾要素であり、マップロジック・戦闘ロジック・セーブデータには一切影響しない
- Canvas非対応環境では `<canvas>` が表示されないだけで、テキスト表示にフォールバックする
- スマホ対応：Canvasは固定サイズ（16/32px）のため既存レイアウト崩れなし
- 外部リソース不使用、APIキー不要