ナンバーブリッジ - 数字を橋でつなぐパズルゲーム

## 1. アプリの目的・ターゲットユーザー
グリッド上に配置された数字ノードを「橋(ブリッジ)」で結び、全ノードを繋ぎ合わせるハシ(橋)パズルゲーム。ルールはシンプルだが奥が深く、通勤中の大人や論理パズル好きな学生(10代〜50代)がサクッと遊べるブラウザゲーム。外部API不要・DB最小構成で実装可能。

## 2. 主要機能
- **パズル本体**: 8×8グリッド上の数字ノード間をドラッグ/クリックで橋を引き、各ノードの数値=そのノードに接続する橋の本数になるよう配置するパズル。橋は水平・垂直のみ、交差不可、最大2本まで。全ノード接続で正解判定。
- **ステージ管理**: 難易度「かんたん(6×6)」「ふつう(8×8)」「むずかしい(10×10)」の3段階×各10問=合計30問の内製プリセットステージ。クリア済みステージはチェックマーク表示。
- **タイムアタックモード**: 制限なしの「じっくりモード」と、60秒以内にクリアを目指す「スピードモード」の切り替え。スピードモードのタイムはローカルランキングに記録。
- **ヒント機能**: 1ステージ3回まで使えるヒントボタン。押すと「確定している橋のうち1本」をハイライト表示。
- **グローバルランキング**: スピードモードの各難易度ベストタイムをDBに保存し、上位20名を表示。名前はニックネーム(最大8文字)で登録。
- **オートセーブ**: LocalStorageでクリア状況・進行中パズルの橋状態を保存。ページを閉じても途中再開可能。

## 3. 画面構成
- **タイトル画面**: ゲームロゴ、「ステージ選択」「ランキング」「遊び方」の3ボタン。背景は薄い格子模様。
- **ステージ選択画面**: 難易度タブ(かんたん/ふつう/むずかしい)×10ステージのカードグリッド。クリア済みは緑チェック、未クリアはグレー。
- **ゲーム画面**: 上部にステージ番号・経過タイム・ヒント残数表示。中央にグリッドキャンバス(数字ノードはサークル、橋は太い線で描画)。下部に「ヒント」「リセット」「ステージ一覧」ボタン。正解時は紙吹雪アニメーション+クリアモーダル(タイム・「次へ」ボタン)。
- **ランキング画面**: 難易度タブ切り替え、順位・ニックネーム・タイム・クリア日時の表形式。自分の記録入力フォーム(ニックネーム+タイム送信)。
- **遊び方モーダル**: ルール説明をGIF風アニメーション(CSS animation)付きで3ステップ図解。

## 4. データ構造
**puzzles テーブル(プリセット管理用・初期データINSERT)**
- id INT PK
- difficulty ENUM('easy','normal','hard')
- stage_no INT
- grid_size INT
- puzzle_data JSON (ノード座標・数値の配列)
- solution_data JSON (正解の橋リスト)

**rankings テーブル**
- id INT PK AUTO_INCREMENT
- difficulty ENUM('easy','normal','hard')
- nickname VARCHAR(8)
- clear_time_ms INT (ミリ秒)
- created_at DATETIME DEFAULT CURRENT_TIMESTAMP

※ゲームロジック・橋の描画・正解判定はすべてクライアント側JSで完結。PHPはランキングのGET/POST APIのみ担当。

## 5. デザインの方向性
- **カラー**: ダークネイビー(#1a2744)背景に、ノードは明るい黄色(#f5c842)のサークル、橋はアクアブルー(#4ecdc4)の線。確定橋と仮置き橋で色・太さを区別(仮置きは細い点線)。
- **フォント**: ゲーム内数字はDSEG7(LCD風)、UIテキストはNoto Sans JP。
- **アニメーション**: 橋を引く際にスルッとした0.1秒トランジション、クリア時は画面中央から紙吹雪がCSSキーフレームで降る。
- **レスポンシブ**: グリッドキャンバスはviewport幅に合わせてスケール調整。スマホはタップ+スワイプで橋を引けるようにタッチイベント対応。全体的にミニマルでシンプルなUI。