ブラウザ全画面ゲームレイアウト：マップ・戦闘Canvas中央最大化＋四隅HUDパネル配置

## 1. 目的
現在のplay.phpはブログ風の縦スクロールレイアウトで、マップや戦闘Canvasが画面の一部に収まっている。これをブラウザ全面をゲーム画面として使う「フルスクリーンゲームUI」に刷新し、マップ・戦闘Canvasを中央に最大表示しつつ、ステータス・ログ・コマンドを四隅のHUDパネルに配置する。既存のplay.php以外のページ（home/create/party）には影響しない。

## 2. 具体的な仕様

### レイアウト構造（play.phpのみ）
```
┌─────────────────────────────────────────────┐
│ [左上HUD] パーティステータス [右上HUD] ミニマップ/環境 │
│ │
│ ★中央Canvas（マップ or 戦闘）★ │
│ 画面幅・高さに合わせ最大化 │
│ │
│ [左下HUD] 進行ログ・ナレーション [右下HUD] コマンドボタン │
└─────────────────────────────────────────────┘
```

### CSSの変更（play.phpの`<style>`内に追加、既存クラスを上書き）
- `body`（play.phpのbody）に `overflow: hidden` を付与し、縦スクロールを廃止
- `.rpgsf-fullscreen-wrapper` を新設：`position:fixed; inset:0; display:grid; grid-template-areas: 'tl center tr' 'bl center br'; grid-template-columns: 260px 1fr 260px; grid-template-rows: 1fr 1fr; background:#0a0a12; z-index:1;`
- `.rpgsf-hud-tl`（左上）、`.rpgsf-hud-tr`（右上）、`.rpgsf-hud-bl`（左下）、`.rpgsf-hud-br`（右下）：`position` はgridセルに従い配置。背景 `rgba(10,10,20,0.85)`、ボーダー `1px solid var(--gold)`、`overflow-y:auto`、`padding:8px`、`font-size:0.82rem`
- `.rpgsf-canvas-center`：`grid-area:center; display:flex; align-items:center; justify-content:center; position:relative;`
- Canvas要素（`#mapCanvas`, `#battleCanvas`）に `max-width:100%; max-height:100%; object-fit:contain;` を適用し、中央エリアに収まるよう自動リサイズ

### スマホ対応
- 画面幅640px以下では四隅HUDを非表示にし、Canvas下部に縦並びで「コマンド」「ログ」タブ切替パネルを表示
- タブボタン2つ（コマンド / ログ）でコンテンツを切り替え
- Canvasは画面幅100%・高さ50vhに制限

### HUD内容の割り当て
- **左上HUD**：主人公＋パーティのHP/MPゲージ（既存の`.hud-bar`をここに移動）
- **右上HUD**：ミニマップCanvas（既存`#miniCanvas`）＋天気/時間帯バッジ＋オーブトラッカー
- **左下HUD**：進行ログ（既存`#log`）最新5件表示＋スクロール可能
- **右下HUD**：コマンドボタン群（移動/戦闘アクション/ふくろ/セーブ）を縦並びで配置

### 既存機能との整合
- play.php内のHTML要素IDはすべて維持し、既存JSのDOM参照を壊さない
- 新しいwrapperで既存パネルを包み直すだけで、PHPロジック・フォーム・CSRFは一切変更しない
- home/create/party/の`rpgsf_render_header()`で読み込む共通CSSには手を加えず、play.php内の`<style>`タグで上書きする
- `body.rpgsf-play-page` クラスを付与し、このクラスがある時だけフルスクリーンCSSが適用されるようにしてスコープを限定する

## 3. 実装手順概要
1. `pages/play.php` の`rpgsf_render_header()`呼び出し後に `<style>` ブロックで上記CSSを追加
2. 既存のHTMLパネル群を `.rpgsf-fullscreen-wrapper` div で包み、四隅のdivに振り分ける
3. Canvas要素を `.rpgsf-canvas-center` に移動
4. JS側でウィンドウリサイズ時にCanvasの `width`/`height` 属性を中央エリアのサイズに合わせて再設定する `resizeCanvas()` 関数を追加（既存の描画関数を再呼び出しするだけ）
5. スマホ用タブ切替JSを追加（既存ロジック不変）