テトラリンク - 色付き四角形を配置して面積を競うテリトリーパズルゲーム

## 1. アプリの目的・ターゲットユーザー
プレイヤーがランダムに配られるテトロミノ風の多角形ピースを10×10グリッドに配置し、自分の色で最大面積を占領することを競うシングル／CPU対戦型パズルゲーム。ルールがシンプルで初回プレイでもすぐ遊べるが、配置の順序と形状選択に戦略が求められる中毒性を持つ。ターゲットは10代〜30代のカジュアルゲーマー、スマホ隙間時間プレイヤー。

## 2. 主要機能
- **ソロ対CPUモード**: プレイヤーとCPU（弱・中・強の3難易度）が交互にピースを配置。全マスが埋まるか置けなくなったら終了し、面積の多い方が勝利。
- **2人ローカル対戦モード**: 同一画面でターン交代しながら対戦。スマホ横持ちでも快適に操作できるレイアウト。
- **エンドレスソロモード**: CPUなしで1人でどこまで効率よく盤面を敷き詰められるかを面積スコアで競い、ハイスコアをランキング登録。
- **デイリーチャレンジ**: 毎日同じシードで生成されたピース順と盤面から最大面積を目指す。スコアをDBに保存してランキング表示。
- **ピースプレビュー＋回転**: 手持ち3枚のピースをキューとして表示し、90°ずつ回転可能。次ターンのピースも1枚先読み表示。

## 3. 画面構成
### タイトル画面
- ゲームロゴ（テトロミノが組み合わさったアニメーション）
- モード選択ボタン：「CPUと対戦」「ローカル2人対戦」「エンドレスソロ」「デイリーチャレンジ」
- ランキングボタン（デイリー・エンドレスの2タブ）

### ゲーム画面
- 中央：10×10グリッドキャンバス。セルは32px角（スマホは28px角）。プレイヤー色＝青系、CPU／相手色＝赤系。
- 左サイド（PC）／上部（スマホ）：プレイヤー情報（色・現在面積・ターン数）
- 右サイド（PC）／下部（スマホ）：手持ちピース3枚カード。選択するとハイライト表示。回転ボタン付き。
- ピースをドラッグ／タップでグリッドにプレビュー表示し、確定タップで配置。
- 「パス」ボタン（置ける場所がない場合）
- ターン表示インジケーター

### 結果画面
- 盤面の最終状態表示（色別に面積シェア率円グラフ）
- 勝敗メッセージ＋スコア
- スコア登録フォーム（ニックネーム入力）→ランキング画面へ遷移
- 「もう一度」「タイトルへ」ボタン

### ランキング画面
- デイリー（当日）とエンドレスの2タブ
- 上位20件：順位・ニックネーム・スコア・日時
- 自分の最新スコアをハイライト表示

## 4. データ構造
### テーブル: scores
| カラム | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT PK | |
| mode | ENUM('daily','endless') | ゲームモード |
| nickname | VARCHAR(20) | プレイヤー名 |
| score | INT | 占領マス数 |
| date_key | DATE | デイリーの日付（endlessはNULL） |
| created_at | DATETIME | 登録日時 |

- DBはランキング保存のみに使用。ゲームロジックはすべてJS完結。
- デイリーのシードはdate_keyから生成（`date('Ymd')`の数値をシードに使うFisherYatesシャッフル）。

## 5. デザインの方向性
- **カラースキーム**: ダークネイビー背景（#0f1923）に蛍光青（#00bfff）と蛍光珊瑚（#ff6b6b）のピース色。グリッド線はグレー（#2a3a4a）。
- **フォント**: タイトルは太めのサンセリフ（Google Fonts: Orbitron相当のローカルフォールバック）。UIテキストはシステムサンセリフ。
- **アニメーション**: ピース配置時に小さなパルスエフェクト（CSS keyframes）。ゲーム終了時に勝者側のセルが点滅。
- **スマホ対応**: グリッドはviewwidth基準でスケーリング。ピース選択はタップ→グリッドタップの2タップ方式でドラッグ不要でも遊べる。
- **規模感**: HTML1枚＋JS1ファイル（~600行）＋CSS1ファイル＋PHPランキングAPI（score_api.php 約80行）で完結する現実的なサイズ。