ナンバーペイント - 数字の橋をつないで島を染める陣取り数字パズルゲーム

## 1. アプリの目的・ターゲットユーザー
ランダム生成されたグリッド上に散らばった「数字島」を橋でつないで陣地を塗り広げ、最終的な占有面積を競う、数字×陣取り×パズルを融合したブラウザゲームです。ナンプレやハシが好きな大人から、数字ゲームに慣れ始めた小中学生まで幅広く楽しめます。ソロのスコアアタックと局所的な CPU 対戦の両方に対応するため、ライトユーザーでも継続プレイしやすい設計にします。

---

## 2. 主要機能
- **ナンバーペイントモード（メイン）**: 8×8 / 10×10 / 12×12 の 3 サイズから選択。各セルに 1〜4 の数字が配置されており、プレイヤーは隣接する同じ数字のセルをクリックしてチェーンを作り、チェーン長さ＝数字の倍数のときにセルを自分の色で塗れる。全セルが塗られたときゲーム終了、塗面積が多い方が勝利。
- **CPU 対戦モード**: CPU が一定間隔で手を打つ。難易度は Easy / Normal / Hard の 3 段階で、CPU の選択優先度（貪欲・先読み・ランダム）を切り替え。
- **60 秒スプリントモード**: 制限時間 60 秒内にひとりで最大面積を塗るタイムアタック。塗れたセル数がスコアとなりグローバルランキングに登録可能。
- **デイリーチャレンジ**: 日付シードで全ユーザー共通のグリッド配置を提供。同じ盤面で何手で全塗りできるかを競う手数カウントランキング。
- **スコア & ランキング**: 60 秒スプリントとデイリーチャレンジのスコアを MySQL に保存してトップ 20 をリアルタイム表示。ニックネーム（最大 8 文字）のみ入力、登録不要。

---

## 3. 画面構成
### タイトル画面
- アプリ名ロゴ（数字ブロックを積み上げたデザイン）
- モード選択ボタン 4 つ：「ナンバーペイント」「CPU 対戦」「60 秒スプリント」「デイリーチャレンジ」
- ランキングボタン（モーダル表示）
- ルール説明アコーディオン

### ゲーム画面
- **ヘッダー**: モード名・残り時間 or 手数・プレイヤー & CPU の占有セル数バー
- **ゲームボード**: CSS Grid または Canvas で描画した N×N グリッド。各セルに数字表示、色塗り済みは半透明のプレイヤーカラーでオーバーレイ。選択中チェーンはハイライト枠で視覚化
- **サイドパネル（PC）/ ボトムパネル（スマホ）**: 「確定（塗る）」ボタン・「リセット選択」ボタン・アンドゥ（1 手戻し、ソロのみ）
- **ゲーム終了オーバーレイ**: 結果（勝敗・占有率）・スコア入力欄（スプリント / デイリーのみ）・「もう一度」「タイトルへ」

### ランキング画面（モーダル）
- タブ切り替え：「60 秒スプリント（サイズ別）」「デイリーチャレンジ」
- 順位・ニックネーム・スコア・日時をテーブル表示

---

## 4. データ構造（DB テーブル概要）
### `np_rankings`
| カラム | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT PK | |
| mode | ENUM('sprint','daily') | ゲームモード |
| board_size | TINYINT | 8 / 10 / 12 |
| daily_date | DATE NULL | デイリー日付 |
| nickname | VARCHAR(20) | プレイヤー名 |
| score | SMALLINT | 塗りセル数 or 手数 |
| created_at | TIMESTAMP | 登録日時 |

インデックス：(mode, board_size, score DESC)、(mode, daily_date, score ASC) でランキング取得を高速化。

API（PHP）:
- `POST api/score.php` … スコア登録（ニックネーム・モード・スコアを受け取り INSERT）
- `GET api/ranking.php?mode=sprint&size=8` … ランキング TOP20 取得（JSON レスポンス）
- `GET api/daily.php` … 当日のシード値（日付ハッシュ）を返す

---

## 5. デザインの方向性
- **カラーパレット**: ダークネイビー背景（#1a1f36）に、プレイヤーカラーをコーラルオレンジ（#ff6b6b）、CPU / 対戦相手をティールブルー（#4ecdc4）、未塗りセルをスレートグレー（#3a3f5c）で統一。数字は白抜きで視認性を確保。
- **フォント**: 数字部分は等幅の丸ゴシック系（Noto Sans JP）。スコア表示はやや太めのサンセリフ。
- **アニメーション**: 塗り確定時に選択チェーンがフラッシュしながら色が広がるCSS keyframes（50ms 程度）。ゲーム終了時は紙吹雪エフェクト（軽量 JS のみ）。
- **スマホ対応**: ボード全体をビューポート幅に収める可変セルサイズ。タップ操作に十分な最小セルサイズ 36px を保証。指でなぞることでチェーン選択できる `touchmove` イベント対応。
- **規模感**: PHP ファイル 3〜4 本（index.php / api 3 本）+ JS 1〜2 本 + CSS 1 本で完結する小規模構成。外部ライブラリ不要。