フロアフリップ - 床を染めるターン制パズルアクション

## 1. アプリの目的・ターゲットユーザー
「フロアフリップ」は、8×8のタイルボード上でコマを動かし、通過したマスの色を自分の色に染めながら相手の陣地を奪い合うターン制ボードゲームです。オセロのように「挟む」ではなく「踏む」「ジャンプ」「スピン」でマスを塗り替えるオリジナルルールが特徴です。スキマ時間に1人でCPUと、あるいはスマホを渡し合って2人対戦を楽しめる、小学生〜大人まで幅広い層を対象とした軽量ブラウザゲームです。

## 2. 主要機能
- **3種のアクション**: ①通常移動（1マス進み踏んだマスを自色に）、②ジャンプ（2マス飛び越し着地マスを染める）、③スピン（その場で360度回転し隣接4マスを同時に染める／3ターンに1回のクールダウン制）
- **CPUモード**: 3難易度（イージー＝ランダム / ノーマル＝貪欲法 / ハード＝ミニマックス深さ3）で一人遊びに対応
- **パス＆プレイ対戦**: 同一デバイスを2人で交互に操作するローカル2人対戦モード
- **スコア＆ランキング**: ゲーム終了時に染めたマス数×残りターン係数でスコアを算出し、DBに保存してトップ10のランキングを表示
- **デイリーチャレンジ**: 毎日固定シード配置（障害物マス入り）でCPUハードと対戦し、最高スコアを競うデイリーミッション
- **チュートリアル**: 初回起動時に3ステップのインタラクティブ操作説明（スキップ可）

## 3. 画面構成
### タイトル画面
- ゲームロゴ（ドット絵風タイル文字）
- モード選択：「CPUと対戦」「2人で対戦」「デイリーチャレンジ」「ランキング」の4ボタン
- 難易度選択（CPUモード時のみ表示するモーダル）

### ゲームプレイ画面
- 8×8グリッドボード（Canvas描画）：プレイヤー色（青）・CPU/相手色（オレンジ）・中立（グレー）・障害物（デイリーのみ）
- 選択中コマ：黄色ハイライト、移動可能マス：薄い点滅表示
- 上部HUD：現在ターン数（最大30ターン）、両者の染めマス数バー、スピンのクールダウンアイコン
- アクションボタン（スマホ用）：「移動」「ジャンプ」「スピン」の3ボタン（PCはキーボード操作も可）
- 右サイドパネル（PC時）：操作説明カード

### リザルト画面
- 勝敗判定（染めマス数多い方が勝ち）、スコア表示、アニメーション演出
- 「もう一度」「タイトルへ」「ランキング登録」ボタン
- ランキング登録：ニックネーム入力（最大8文字）→DBへPOST

### ランキング画面
- 難易度別タブ（イージー／ノーマル／ハード／デイリー）
- トップ10の順位・名前・スコア・日時テーブル
- 自分のスコアの位置をハイライト表示（sessionStorage活用）

## 4. データ構造
### テーブル: `floor_flip_scores`
| カラム | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT PK | |
| nickname | VARCHAR(20) | プレイヤー名 |
| score | INT | 最終スコア |
| mode | ENUM('easy','normal','hard','daily') | 対戦モード |
| daily_date | DATE NULL | デイリー時の対象日 |
| created_at | DATETIME | 登録日時 |

※デイリーは同一IPかつ同一daily_dateで1件のみ登録（INSERT IGNORE的な制御）

## 5. デザインの方向性
- **カラーパレット**: ダークネイビー（#1a1f3a）背景、プレイヤー青（#4a9eff）、CPU橙（#ff7a3a）、中立グレー（#3a3f5a）、グリッド線（#2a2f4a）
- **フォント**: Google Fonts「Press Start 2P」をタイトルと数字に、游ゴシック系を説明文に使用
- **アニメーション**: マス染色時にCSS transformでフリップ（Y軸180度回転）する0.3秒アニメ、スコアアップ時に+数字がフロートアップ
- **レスポンシブ**: ボードを`min(90vw, 480px)`で正方形固定、スマホ縦持ちでも全要素が画面内に収まる構成
- **効果音**: Web Audio APIで生成する軽量ビープ音（タップ音・スピン音・勝利ファンファーレ）
- **全体トーン**: ポップすぎず重すぎない、シンプルなゲームUIで1〜2分で一局完結する爽快感を重視