エリア侵略パズル - ヘクスウォーズ (hex-wars)

## 1. アプリの目的・ターゲットユーザー
六角形(ヘクス)マスで構成されたボードを舞台に、1〜2人でエリアを塗り広げながら相手の領地を侵食していく陣取りストラテジーパズルゲーム。既存アプリのリズム・RPG・スライド・テトリス・格闘・ボードすごろく・インクアクションとは異なる「ヘクスグリッド×陣取り」という切り口で提供する。ターゲットは10代〜40代のカジュアルストラテジー好きで、スマホ5分〜PC30分の幅広いプレイスタイルに対応。

## 2. 主要機能
- **ソロ vs CPU モード**: 難易度3段階(イージー/ノーマル/ハード)のCPU相手に陣取り対戦。CPUはJS内製の貪欲アルゴリズム(易)〜ミニマックス簡易版(難)で実装
- **ローカル2人対戦モード**: 同一画面の交互タップで2人対戦。パーティゲームとして友人・家族と遊べる
- **3マップ×3サイズ**: 小(7×7)・中(9×9)・大(11×11)の六角グリッドマップと、「平地」「山岳(移動制限)」「沼(コスト増)」の3地形タイプをランダム配置
- **駒の強化システム**: 自分の領地マス数に応じてポイントが溜まり、ターンごとに「増殖/防御/砦建設」の3アクションから1つを選んで実行。単純な塗り合い以上の戦略性を演出
- **グローバルスコアランキング**: CPU撃破時の占有率・ターン数・地形ボーナスからスコアを算出し、MySQLに保存してランキング表示(ニックネーム任意入力)

## 3. 画面構成
### タイトル画面
- ゲームロゴ(ヘクスタイルをモチーフにしたアイコン)
- 「vs CPU」「2人対戦」の2ボタン
- マップサイズ選択(S/M/L)・難易度選択(CPUモード時)
- 「ランキングを見る」ボタン

### ゲーム画面
- 上部: プレイヤー1/2の現在領地数・スコア・残りアクションポイント表示
- 中央: ヘクスグリッドボード(Canvas描画)。自分の領地マス=色A、相手=色B、中立=グレー、山=茶、沼=緑
- 下部: アクション選択パネル(増殖/防御/砦ボタン)とターン終了ボタン
- 右サイドパネル(PC) or 折りたたみ(SP): ゲームログ(直近5アクション)
- 勝敗モーダル: 占有率・ターン数・スコアを表示し「再挑戦」「タイトルへ」ボタン

### ランキング画面
- マップサイズ別タブ(S/M/L)でランキング切替
- 上位20件をテーブル表示(順位・ニックネーム・スコア・占有率・難易度・日時)

## 4. データ構造
### DBテーブル: `hex_scores`
| カラム | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT PK | |
| nickname | VARCHAR(20) | プレイヤー名(未入力時「Anonymous」) |
| score | INT | 算出スコア |
| occupy_rate | TINYINT | 最終占有率(%) |
| turns | SMALLINT | 使用ターン数 |
| map_size | ENUM('S','M','L') | |
| difficulty | ENUM('easy','normal','hard') | |
| created_at | DATETIME | |

※ ゲームの盤面状態はすべてJSのみで管理。DB接続はスコア登録・取得APIのみ(PHP製シンプルREST)。

## 5. デザインの方向性
- **カラーパレット**: ダークネイビー(#1a2340)を基調としたマップ背景に、プレイヤー1=コーラルレッド、プレイヤー2=ティールグリーンで領地を塗り分け。山=ウォームブラウン、沼=モスグリーン
- **ヘクスタイル描画**: HTML5 Canvas + 素のJSで六角形を描画。タップ/クリック判定も Canvas座標から六角形の所属マスを逆算
- **アニメーション**: 領地取得時にマスが0.3秒でフェードイン塗り替え。砦建設時に星アイコンをCanvas上に描画
- **フォント**: 見出しにGoogle Fontsの「Orbitron」(英字)、本文は sans-serif
- **レスポンシブ**: スマホ縦持ちでは小マップ(7×7)推奨の案内を表示しCanvasサイズを自動縮小。PC横長では中央にボード・左右に情報パネルを3カラム配置
- **難易度**: ゲームロジックはすべてフロントJS完結。PHPはスコアのCRUDのみ担当するため実装コストが低く1スプリントで完成可能