戦闘・マップ画面に天気・時間帯の環境エフェクトをCanvas重ね描きで追加

## 1. 目的
現在のマップ・戦闘Canvasは静的描画で、広大なワールドマップや戦闘シーンの没入感に課題がある。天気（晴れ・雨・雪・霧）と時間帯（昼・夕暮れ・夜）を組み合わせた環境エフェクトをCanvasの上レイヤー（overlay canvas）として重ね描きすることで、視覚的リッチさを既存機能を壊さずに追加する。

## 2. 具体的な仕様

### 2-1. 環境状態の決定
- シナリオ生成時（PHP側 `rpgsf_create_scenario`）に `scenario_json` の中に `environment` オブジェクトを追加する。
```json
"environment": {
"weather": "rain",
"time_of_day": "night"
}
```
- `weather` の値: `clear` / `rain` / `snow` / `fog`（テーマのタグで重み付けして選択。沼・呪い→fog、海・港→rain、山・神殿→snow、砂漠・草原→clear 優先）
- `time_of_day` の値: `day` / `dusk` / `night`（難易度 hard→night 優先、easy→day 優先、normal→ランダム）
- 既存シナリオには `environment` キーが無いため、JS側でフォールバックとして `clear` + `day` を使用する。

### 2-2. オーバーレイCanvas構造
- `pages/play.php` のマップCanvas（`#mapCanvas`）および戦闘Canvas（`#battleCanvas`）の真上に、同サイズの `<canvas id="envCanvas">` を `position:absolute; top:0; left:0; pointer-events:none;` で重ねる。
- CSSで親要素に `position:relative` を付与（既存のゲームレイアウト構造を変更しない）。

### 2-3. エフェクト描画仕様（JavaScript）
`env_effect.js` として独立したファイルを作成し、`play.php` でインクルードする。

#### 天気エフェクト（アニメーションループ）
- **rain（雨）**: 白い斜め線パーティクル（`width:1px, length:10-15px, angle:15deg, opacity:0.35`）を約150粒、毎フレーム `y += 6` で下方向に流す。画面外に出たら上部にランダムX座標でリセット。
- **snow（雪）**: 白い円パーティクル（`radius:2-4px, opacity:0.6`）を約80粒、ゆらゆら横揺れしながら `y += 1.5` で降下。
- **fog（霧）**: 半透明の白グラデーション矩形（`rgba(220,220,220,0.18)`）を複数枚、`x` 座標をゆっくり移動（`x += 0.3`）させて流す。
- **clear（晴れ）**: エフェクトなし（透明）。

#### 時間帯オーバーレイ（静的塗り）
- **day**: 透明（何も描画しない）。
- **dusk（夕暮れ）**: `rgba(255,120,60,0.18)` の全面矩形を1枚描画。
- **night（夜）**: `rgba(10,10,50,0.38)` の全面矩形 + 星をランダムドット（`radius:1px, opacity:0.7`）で30粒描画。

#### アニメーションループ
```js
function envLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawTimeOverlay(); // 時間帯の色面
drawWeatherParticles(); // 天気パーティクル
requestAnimationFrame(envLoop);
}
```

### 2-4. Canvas サイズ同期
- マップ・戦闘Canvasのリサイズイベント（またはゲーム画面切り替え時）に合わせて `envCanvas.width` / `envCanvas.height` を同期する。
- `ResizeObserver` で親要素を監視し、変化があれば envCanvas サイズを更新してパーティクルをリセット。

### 2-5. 戦闘画面での追加演出
- 戦闘Canvas（`#battleCanvas`）でも同様に `envCanvas` を重ねる。
- 戦闘中に `night` + `rain` の組み合わせの場合、モンスターのドット絵Canvas周囲に薄い影グラデーション（`radialGradient rgba(0,0,0,0.4)`）を追加して、より暗い雰囲気を演出する。

### 2-6. UI表示
- ゲーム画面の左上HUDエリアに天気・時刻の絵文字バッジを表示する。
- clear+day: ☀️ / rain+dusk: 🌧️ / snow+night: 🌨️🌙 など
- CSSで `font-size:0.75rem; opacity:0.8` の小さいバッジとして表示（既存HUDパネルに `<span id="envBadge">` を追加）。

### 2-7. パフォーマンス対策
- `document.hidden` が `true` のとき（タブ非表示）はアニメーションループを停止し、`visibilitychange` で再開する。
- パーティクル数はスマホ判定（`window.innerWidth < 600`）時に半分に削減する。

## 3. 既存機能との整合
- 既存のマップCanvas・戦闘Canvasのコードは一切変更しない。
- `envCanvas` は `pointer-events:none` のため、タップ・クリック操作の妨げにならない。
- `environment` キーが無い既存シナリオではフォールバックで `clear+day`（エフェクトなし）になるため、既存プレイに影響なし。
- BGM・SE・音量調整・セーブ・ロード・モンスター図鑑など既存機能は無変更。
- スマホ・PC両対応（Canvasサイズをレスポンシブに同期）。