タイルマップのCanvasリッチ化：地形タイルを絵文字・CSSから手描き風ドット絵Canvasに置き換え

## 1. 目的
現状のマップは CSS クラス＋絵文字・テキスト記号（♣▲~など）でタイルを表現しているが、他の要素（キャラスプライト・モンスタードット絵）はすでに Canvas 自動生成でリッチ化されている。地形タイルも同様に Canvas で手描き風ドット絵を自動生成することで、マップ全体の視覚的統一感を高め、SFC 風の没入感を強化する。

## 2. 具体的な仕様

### 2-1. タイルCanvasレンダラー（JS側）
- `rpgsf_drawTile(ctx, tileType, x, y, tileSize)` 関数を play.php の `<script>` 内に実装する。
- tileSize は 32px（PC）/ 24px（スマホ）を基本とし、既存マップ表示サイズに合わせる。
- 各地形タイプ（G/F/M/W/S/R/P/C/T/V/D/N/E）に対して以下のドット絵パターンを Canvas 2D API で描画する：

| タイプ | 描画内容 |
|--------|----------|
| G 草原 | 明緑ベース＋濃緑の短い草ストローク3〜4本をランダム配置 |
| F 森 | 濃緑の三角形（木シルエット）2本＋暗緑の幹 |
| M 山 | 灰色の三角形（山シルエット）＋白い雪頂点 |
| W 水辺 | 青系グラデーション＋白の波線2本 |
| S 砂地 | 砂色ベース＋薄茶の細かいドット散布 |
| R 遺跡床 | 灰ベース＋暗灰の石目ライン（格子状） |
| P 毒沼 | 暗緑ベース＋紫の泡ドット3個 |
| C 城床 | 暗灰ベース＋明灰の石畳パターン（2x2ブロック） |
| T 野営地 | 茶ベース＋オレンジの炎シルエット（三角＋揺らぎ） |
| V 村入口 | 草ベース＋茶色の屋根三角形1個 |
| D 洞窟入口 | 黒楕円（穴）＋岩色の縁取り |
| N 神殿入口 | 白ベース＋金色の鳥居型シルエット |
| E 出口 | 黄緑ベース＋白い矢印（↑） |

- 各タイルのランダム要素（草の位置・砂ドット）はタイル座標(x,y)をシードとした疑似乱数で固定し、再描画のたびに変わらないようにする（`seed = x * 31 + y * 97` 等の簡易ハッシュ）。

### 2-2. マップ描画CanvasへのDOM統合
- 既存のマップ描画部分（`.map-grid` など）を `<canvas id="rpgsf-map-canvas">` に置き換えるか、既存グリッドセルの背景を Canvas で生成した `toDataURL()` のData URLで置き換える方式どちらでも可。
- **既存機能（プレイヤー移動・NPC接触・宝箱・ミニマップ）は一切変更しない**。Canvasはあくまで見た目（タイル背景）の置き換えに留める。
- プレイヤー・NPC・宝箱のドット絵スプライトは既存の描画ロジックをそのまま使用し、マップCanvas上にオーバーレイするか、既存DOM構造を維持してタイル背景CSS画像だけをCanvas生成DataURLに差し替える方式を採用する。

### 2-3. ミニマップへの反映
- ミニマップ（既訪問タイルのみ表示）も同様に、各タイルタイプの代表色（G=`#5a8f3c`、M=`#888`、W=`#3a7abf`など）を定数として定義し、ミニマップCanvas上でも小さな色ブロックとして塗り分ける。絵文字表示から脱却して視認性を向上させる。

### 2-4. パフォーマンス対策
- タイルCanvasは1タイル分のOffscreenCanvas（または通常Canvas）を地形タイプ×バリアント数だけ事前生成してキャッシュする（`tileCache[type]`）。マップ描画時はキャッシュから`drawImage()`で貼り付けるだけにする。

## 3. 既存機能との整合
- PHP側・ゲームロジック・セーブデータ・アクション処理は一切変更しない。
- CSSの地形クラス（.grass, .forest 等）は残しておき、Canvas非対応環境のフォールバックとして機能させる。
- スマホ対応：tileSize をウィンドウ幅に応じて動的に計算する既存の responsive ロジックを踏襲する。
- 転職・仲間スプライトなど既存Canvas描画との描画順序を維持し、タイル→オブジェクト→キャラの順でレイヤリングする。