ジグソーワード - 文字ピースを組み合わせて単語を完成させるパズルゲーム

## 1. アプリの目的・ターゲットユーザー

「ジグソーワード」は、バラバラに散らばった文字ピース（かな・漢字）を拾い集めてお題の単語を完成させる、ジグソーパズルとワードゲームを融合させた新感覚ブラウザパズルゲームです。既存のワードゲームが「入力して当てる」形式なのに対し、本アプリは「盤面を探索してピースを拾う」操作体験を核心とする点で独自性があります。語彙力・集中力・観察力を楽しく鍛えられるため、小学生から高齢者まで幅広く遊べます。スマホ片手に1〜3分の短時間でサクッと遊べる設計を重視します。

---

## 2. 主要機能

- **ノーマルステージモード**: 難易度（かんたん/ふつう/むずかしい）ごとに100ステージを用意。1ステージあたり「お題の単語（2〜6文字）」が1〜3語出題され、20〜40マスのグリッド盤面にお題の文字ピースとダミーピースが散らばる。クリックorタップでピースを選択し、お題の空欄に正しい順でドロップして完成させる。
- **60秒タイムアタック**: 制限時間60秒の間に次々現れる3文字単語を何問解けるか競うスピードモード。間違えた場合は3秒ロスペナルティ。スコアはサーバーランキングに登録可能。
- **デイリーチャレンジ**: 毎日同じシード値で全プレイヤー共通の盤面を出題。スコア・クリアタイムをランキングで比較でき、毎日のリプレイ動機になる。
- **テーマパック**: 食べ物・動物・国名・スポーツ・乗り物・職業など10テーマのカテゴリパックを収録。テーマを選んで集中学習できるためファミリー・学習用途にも対応。
- **ヒントシステム**: 1ステージあたりヒントコイン3枚を消費することで、正しいピースの一つをハイライト表示するアシスト機能。コインはステージクリアで補充。
- **ローカルランキング & 全国ランキング**: タイムアタック・デイリーのスコアをMySQLに記録し、全国トップ20と自己ベストを表示。

---

## 3. 画面構成

### タイトル画面
- ゲームロゴ（ジグソーピース型の文字デザイン）
- モード選択ボタン: ステージ / タイムアタック / デイリーチャレンジ
- ランキングボタン、遊び方ボタン

### ステージ選択画面
- 難易度タブ（かんたん/ふつう/むずかしい）
- テーマカテゴリフィルター（アイコン付きボタン）
- ステージカード一覧（クリア済み✅・未クリア・ベストタイム表示）

### ゲームプレイ画面（メイン）
- 上部: ステージ番号 / お題表示エリア（空欄ブランク付き） / 残り時間（タイムアタック時） / ヒントコイン残数
- 中央: グリッド盤面（CSS Gridで実装。各マスにひらがな・漢字ピースまたは空白マス）。ピースはジグソーっぽいSVGクリップパスで縁取り。
- 下部: 選択中のピース表示トレイ / 取り消しボタン / ヒントボタン
- 正解時: 紙吹雪アニメーション + 効果音 + タイムとスコア表示
- 不正解時: 赤いシェイクアニメーション

### 結果画面
- スコア・クリアタイム・獲得コイン表示
- 全国ランキングでの自分の順位（タイムアタック・デイリー時）
- 「次のステージ」「リトライ」「ホームへ」ボタン
- SNS共有用テキスト（スコアと絵文字コピー）

### ランキング画面
- タブ切替: タイムアタック / デイリーチャレンジ
- トップ20リスト（順位・ニックネーム・スコア・日時）
- 自己ベスト表示（LocalStorage参照）

---

## 4. データ構造

### stages テーブル
```
id INT PK AUTO_INCREMENT
difficulty ENUM('easy','normal','hard')
theme VARCHAR(50) -- 'food','animal','country' etc.
words JSON -- ["りんご","みかん"] など1〜3語
seed INT -- グリッド生成用シード値
created_at TIMESTAMP
```

### daily_challenges テーブル
```
id INT PK AUTO_INCREMENT
challenge_date DATE UNIQUE
stage_id INT FK
```

### rankings テーブル
```
id INT PK AUTO_INCREMENT
mode ENUM('timeattack','daily')
challenge_date DATE NULL -- dailyのみ使用
nickname VARCHAR(20)
score INT
clear_time_ms INT
created_at TIMESTAMP
```

### ステージデータについて
- DBに100ステージ分のstagesレコードを事前投入（単語リストはPHPの配列定数でも可）
- グリッド盤面はクライアント側JSがseed値をもとにシャッフル生成（PHP不要）
- ニックネームは任意入力（未入力時は「ゲスト」+ランダム4桁）

---

## 5. デザインの方向性

- **カラーパレット**: クリーンな白地に明るいピースカラー（ターコイズ・珊瑚・レモンイエロー）。背景には薄いジグソーピース柄のパターンを重ねる。
- **ピースUI**: CSS clip-path または SVG でジグソーピースらしい凸凹の縁を表現。選択時は軽い浮き上がり（box-shadow + translateY）アニメーション。
- **フォント**: 丸みのある日本語フォント（Noto Sans JP または Google Fonts）。
- **アニメーション**: ピース配置成功時のポップイン、ステージクリア時の紙吹雪（CSS + Canvas）、タイムバー残り5秒の赤点滅。
- **サウンド**: Web Audio API で軽量生成。ピック音・配置音・クリア音・ミス音の4種のみ。
- **レスポンシブ**: グリッドセルサイズをvwベースで調整し、スマホ縦持ち・PC横持ち両対応。最大幅480pxのカード型レイアウト。
- **難易度感**: かんたんは2〜3文字×3語＋ダミー少なめ。むずかしいは5〜6文字×2語＋同一音のダミーを多数配置してチャレンジング。