クロスワードパズルメーカー CrossCraft - 自分で作って遊べるクロスワード

## 1. アプリの目的・ターゲットユーザー
ブラウザだけで「クロスワードパズルを作る」「既存パズルを解く」の両方が楽しめる無料Webアプリ。先生が授業用教材として作ったり、家族・友人に謎解きプレゼントとして贈ったり、自分で解いて頭の体操にしたりできる。ターゲットは小学生〜シニアまで幅広く、特に学習教材作成者・パズル好き・暇つぶしユーザー。

## 2. 主要機能
- **パズルメーカー機能**: グリッドサイズ(10×10 / 13×13 / 15×15 の3択)を選択し、マスをクリックして黒マス/白マスを切り替え。白マスに単語と読み(ヒント文)を入力すると番号が自動付番される。タテ・ヨコの単語が整合するかバリデーション。
- **プリセットパズル収録**: 内製の日本語クロスワードパズルを難易度別(かんたん・ふつう・むずかしい)×ジャンル別(一般教養・食べ物・地理・動物・スポーツ)で計30問収録。外部API不要で即遊べる。
- **プレイ機能**: マスをクリックしてタテ/ヨコ方向を選択し文字を入力。完成チェックボタンで正誤判定、ミスマスをハイライト表示。クリアタイムを計測してローカルストレージに記録。
- **パズル共有**: 作成したパズルをURLエンコードしたクエリパラメータとして共有URLを生成。受け取った人はそのURLにアクセスするだけで即プレイ可能(DBなしでも共有できる)。オプションでサーバーDB保存によるショートコード(6桁)共有にも対応。
- **印刷機能**: 作成・閲覧中のパズルを印刷用レイアウト(問題面+解答面)でブラウザ印刷できる。授業プリントや家庭でのプリントに活用可能。

## 3. 画面構成
### トップページ
- ヒーローバナー「作ろう・解こう・贈ろう」キャッチコピー
- 大ボタン2つ:「パズルを解く (プリセット一覧)」「パズルを作る (メーカー起動)」
- 最近遊んだパズルのミニカード(ローカルストレージから)

### プリセットパズル一覧ページ
- 難易度フィルター(かんたん/ふつう/むずかしい)×ジャンルフィルターのタブ
- パズルカード(タイトル・難易度星アイコン・クリア率バッジ)

### プレイページ
- 上部: タイトル・タイマー・ヒントボタン・リセットボタン
- 中央: クロスワードグリッド(レスポンシブ、スマホは画面幅に合わせてスケール)
- 下部: ヨコ/タテのヒント一覧(クリックで対応マスにフォーカス)
- クリア時: タイムと「シェア」「次のパズル」モーダル

### パズルメーカーページ
- ステップ1: グリッドサイズ選択
- ステップ2: 黒マスレイアウト編集(グリッドクリックでトグル)
- ステップ3: 単語・ヒント入力フォーム(自動採番されたリストに入力)
- ステップ4: プレビュー確認→共有URL生成 / 印刷
- 右サイドに「ヒント: 黒マスは点対称に配置するとプロっぽくなります」などのTips表示

## 4. データ構造
### puzzles テーブル (プリセット + ユーザー投稿保存用)
```
id INT AUTO_INCREMENT PRIMARY KEY
short_code VARCHAR(8) UNIQUE -- 共有用6〜8桁コード
title VARCHAR(100)
grid_size TINYINT -- 10 / 13 / 15
grid_data TEXT -- JSON: 黒マス配置の2次元配列
words_data TEXT -- JSON: [{number, dir, row, col, answer, hint}]
difficulty TINYINT -- 1:かんたん 2:ふつう 3:むずかしい
category VARCHAR(30)
is_preset TINYINT(1) DEFAULT 0
play_count INT DEFAULT 0
created_at DATETIME
```

### ローカルストレージ (クライアント側)
- `cc_progress_{short_code}`: 入力途中のマス状態JSON
- `cc_cleared`: クリア済みshort_codeと記録タイムの配列

## 5. デザインの方向性
- テーマカラー: ネイビー(#1a2e5a)×クリーム(#fdf6e3)×ゴールドアクセント(#e8b84b) — 新聞パズル面をデジタル化したクラシック感
- フォント: 見出しに丸ゴシック系、グリッド内文字はモノスペース風の読みやすいサンセリフ
- グリッドマス: 白マスは薄いベージュ、黒マスはネイビー、フォーカスマスはゴールドハイライト
- スマホ対応: グリッドをpinch-zoom不要な自動スケーリングで表示。ヒント一覧は下部ドロワーに格納
- アニメーション: クリア時に紙吹雪confettiエフェクト(Canvas純正実装、外部ライブラリなし)
- 全体的に「上質な大人のパズル雑誌」のような落ち着いたUIで、シニア層も使いやすい大きめフォントサイズ(最小14px)を維持