エリアペイント - リアルタイム陣取りペイントアクション

## 1. アプリの目的・ターゲットユーザー
グリッドマップ上で自分の色ペンキを広げながら、CPUまたは同画面の対戦相手と陣地面積を競うブラウザ完結型の陣取りアクションゲーム。
ターゲットは小学生〜30代のカジュアルゲーマー。スプラッシュ系の爽快感を2Dシンプル操作で再現しつつ、スプラッシュアリーナ3D（3D・アクション・武器選択）とは切り口を変え「純粋な陣取りパズル×アクション×塗り広がりの気持ちよさ」に特化する。

## 2. 主要機能
- **ソロ練習モード**: 60秒以内にCPU（3難易度）相手とボードを塗り合い、最終的な塗り面積で勝敗を決める
- **ローカル対戦モード（2P）**: 同一デバイスで2人がキーボードを分け合い対戦（P1: WASD、P2: 矢印キー）。スマホはバーチャルパッドを表示
- **ペイントスキル**: 移動しながら自動的に床を塗り、4マス先まで一気に塗る「ダッシュペイント」と隣接4マスを同時に塗る「バーストペイント」の2スキルを各3回/ゲーム使用可能（ゲージ回復制）
- **障害物＆イベントマス**: マップにランダムに壁・ワープゾーン・塗り範囲倍増マスを配置し、毎ゲームで展開が変わる
- **スコアランキング**: ソロモードのスコア（塗り面積%×残り時間ボーナス）をサーバー側MySQLに保存し、全体TOP20を表示

## 3. 画面構成
### タイトル画面
- ゲームロゴ（ペンキが垂れるアニメ）
- 「ソロ練習」「ローカル2P対戦」「ランキング」の3ボタン
- キャラクターアイコン選択（4色×4形のシンプルドット絵キャラ、計16種）

### ゲーム画面
- 中央: 20×20グリッドのゲームフィールド（セルは24px）
- 上部ステータスバー: 残り時間カウントダウン、P1/P2塗り面積%をリアルタイム表示するペイントゲージ
- 下部（スマホ時）: バーチャル十字パッド＋スキルボタン2つ
- フィールド内のセルは「未塗り（グレー）」「P1カラー」「P2カラー」の3状態で塗り替わる
- 塗り替えた瞬間に小さなパーティクル（JSの簡易Canvas描画）でペンキが弾ける演出

### 結果画面
- 最終塗り面積の比較バー（勝敗アニメーション付き）
- ソロ時はスコアと全国順位を表示、名前入力（10文字以内）でランキング登録
- 「もう一度」「タイトルへ」ボタン

### ランキング画面
- 「本日」「週間」「全期間」タブ切替
- TOP20を1行ずつ（順位・名前・スコア・使用キャラアイコン）でリスト表示

## 4. データ構造
### テーブル: `area_paint_scores`
| カラム | 型 | 説明 |
|---|---|---|
| id | INT AI PK | |
| player_name | VARCHAR(10) | 入力名 |
| score | INT | 塗り面積%×時間ボーナスの合算値 |
| difficulty | TINYINT | 1=易・2=普・3=難 |
| character_id | TINYINT | 使用キャラ(1〜16) |
| created_at | DATETIME | 登録日時 |

PHP側エンドポイント:
- `POST api/score.php` → スコア登録
- `GET api/score.php?tab=today|week|all` → TOP20取得

ゲーム本体はすべてクライアント側JS（Canvas + setInterval）で完結。ランキング送受信のみサーバー通信。

## 5. デザインの方向性
- **テーマ**: ポップ＆ビビッドなペンキ缶デザイン。背景はコンクリート風グレーテクスチャ（CSSで表現）
- **カラーパレット**: P1 = 鮮やかな珊瑚オレンジ (#FF6B35)、P2 = エレクトリックブルー (#00B4D8)、未塗り = #CCCCCC
- **フォント**: 丸みのあるゴシック体（Noto Sans JPまたはシステムフォント）
- **アニメーション**: Canvas上でセルが塗られる際にスプラッター風の円形広がりをsetTimeoutで順次描画（軽量）
- **サイズ感**: PC時640px幅、スマホ時は画面幅に合わせてgridをスケール。縦スクロールなしで1画面に収まるコンパクトレイアウト