島ごとの「天気・時間帯変化アニメーション」付きワールドマップ画面切り替えエフェクト追加

## 1. 目的
島間を移動する際に、現在の島バイオームと天候・時間帯を反映したCanvas上のトランジションエフェクトを追加することで、島ごとの雰囲気の違いを視覚的に演出し、プレイヤーの没入感を高める。

## 2. 具体的な仕様

### 2-1. トリガー
- ワールドマップ上でプレイヤーが「別の島」に上陸した瞬間（island_id が変化したとき）にエフェクトを発火する。
- 既存の island_id 変化検出ロジック（rpgsf_world_islands を参照）に JS 側でフックを追加する形で実装する。

### 2-2. エフェクト内容
バイオーム × 天候の組み合わせで以下の3段階アニメーションをCanvasオーバーレイ（mapCanvas と同サイズの透明Canvasを重ねる）でシーケンシャルに再生する。

| フェーズ | 内容 | 時間 |
|---|---|---|
| ① フェードアウト | 既存Canvas全体を黒（または白）にフェード | 400ms |
| ② 島名バナー表示 | 中央に「〇〇島へようこそ」＋バイオームアイコン＋天候アイコン（絵文字）をレトロフォントで表示 | 800ms |
| ③ フェードイン | 新しいCanvas描画を表示しながら元に戻す | 400ms |

バイオーム別のフェード色：
- grassland / forest → 緑系 `rgba(0,80,0,0.85)`
- desert → 橙系 `rgba(120,60,0,0.85)`
- snow → 白系 `rgba(200,230,255,0.85)`
- volcano → 赤系 `rgba(100,0,0,0.85)`
- swamp → 紫系 `rgba(40,0,60,0.85)`
- coast → 青系 `rgba(0,40,100,0.85)`

天候アイコン（既存 env_badge_icon と同じ絵文字）をバナー右に添える。

### 2-3. 島名バナーのデータ
- 島名は既存の `island['island_name']` を使用。
- バイオームラベルは既存の `rpgsf_play_biome_definitions()` から取得。
- PHP側で `scenario_json` の islands 配列をJSに渡す際、既存の `rpgsf_world_islands()` 呼び出し結果をJSON化してJS変数に埋め込む（`<script>var RPGSF_ISLANDS = <?= json_encode(...) ?>;</script>`）。

### 2-4. JS実装概要
```javascript
// play.php の <script> 内に追加
function rpgsf_island_transition(islandId, callback) {
var island = (RPGSF_ISLANDS || []).find(function(i){ return i.island_id == islandId; }) || {};
var biome = island.biome_hint || 'grassland';
var name = island.island_name || '新しい島';
var biomeColors = {
grassland:'rgba(0,80,0,0.85)', forest:'rgba(0,80,0,0.85)',
desert:'rgba(120,60,0,0.85)', snow:'rgba(200,230,255,0.85)',
volcano:'rgba(100,0,0,0.85)', swamp:'rgba(40,0,60,0.85)',
coast:'rgba(0,40,100,0.85)'
};
var color = biomeColors[biome] || 'rgba(0,0,0,0.85)';
// overlayCanvas を生成して mapCanvas の上に absolute で重ねる
// requestAnimationFrame で opacity をアニメーション
// フェーズ①→②→③の順にsetTimeout制御
// 完了後 callback() を呼ぶ
}
```
実際の移動処理（島変化検出後の `rpgsf_island_transition(newIslandId, function(){ /* 通常の上陸ログ処理 */ })` ）に挟み込む。

### 2-5. スマホ対応
- overlayCanvas は `position:absolute; top:0; left:0; pointer-events:none; z-index:50` で配置し、mapCanvas のラッパーに `position:relative` を付与する。
- スマホの場合はバナー文字サイズを `16px→12px` に自動縮小（`canvas.width < 400` で判定）。

### 2-6. スキップ機能
- エフェクト中にタップ/クリックすると即座にフェーズ③に飛ぶ（`overlay.addEventListener('click', skip)`）。
- ローカルストレージキー `rpgsf_skip_transition` が `'1'` の場合はエフェクトをスキップし、バナーのみ300msで表示して消える簡易版にする。
- 設定メニュー（既存の音量調整UIの近く）に「島移動エフェクト: ON/OFF」チェックボックスを追加してこのフラグを切り替える。

## 3. 既存機能との整合
- 既存のワールドマップCanvas描画・ミニマップ・HUD・スマホタブUI は一切変更しない。
- overlayCanvas は既存 mapCanvas の描画ループに干渉しない独立レイヤーとして実装する。
- island_id の変化検出は既存の上陸ログ処理（`rpgsf_log`）の直前にフックするだけなので、マップ移動・戦闘・セーブ等の既存ロジックに影響しない。
- PHP側の変更は `play.php` に `RPGSF_ISLANDS` JS変数を出力する1ブロック追加のみ。