BracketArena - トーナメント表自動生成メーカー

## 1. アプリの目的・ターゲットユーザー
学校の体育祭・部活の大会・社内スポーツ大会・ゲーム大会・じゃんけん大会など、あらゆる「トーナメント」を誰でも5分で作れる無料ツール。参加者名を入力するだけで本格的なトーナメント表を自動生成し、試合結果を記録・共有できる。主なターゲットは教員・サークル幹事・会社の総務担当・eスポーツ主催者。

## 2. 主要機能
- **トーナメント自動生成**: 参加者名(2〜64名)を入力するとシングルエリミネーション／ダブルエリミネーション／総当たりリーグ戦の3形式に対応したトーナメント表を自動構築。奇数人数はシード(BYE)を自動配置。
- **ドラッグ&ドロップ対戦結果入力**: 各試合の勝者をクリックまたはスコア入力で記録。勝者は自動的に次ラウンドへ進出し、表がリアルタイム更新される。
- **シード・ランダム配置**: シード順設定またはシャッフルボタンで組み合わせを自動ランダム決定。
- **PNG/SVG 出力 & 共有リンク**: トーナメント表を画像ダウンロード(PNG)またはリンク共有(URLでそのまま閲覧・更新可能)。共有リンクは編集用と閲覧専用の2種類を発行。
- **テーマ切り替え**: スポーツ／ゲーム／シンプルオフィスの3テーマ(カラー・アイコン変更)でシーンに合ったデザインに変更可能。
- **大会情報ヘッダー**: 大会名・開催日・主催者名・コメントをトーナメント表上部に表示できる。

## 3. 画面構成
### ① ホーム画面
- キャッチコピーと「今すぐ作成」ボタン
- 形式選択カード(シングルエリミネーション／ダブルエリミネーション／リーグ戦)
- 最近作成したトーナメント一覧(sessionStorage管理)

### ② 設定画面
- 大会名・開催日・主催者テキスト入力欄
- 参加者名入力エリア(1行1名のテキストエリア、または1つずつ追加ボタン)
- シード設定(ドラッグ&ドロップで並び替え)またはランダムシャッフルボタン
- テーマ選択トグル(スポーツ／ゲーム／オフィス)
- 「トーナメント生成」ボタン

### ③ トーナメント表画面(メイン)
- 横スクロール対応のトーナメント表(Canvas または SVG で描画)
- 各対戦マスをクリック→モーダルでスコア入力・勝者選択
- 上部: 大会名ヘッダー、右上にダウンロード(PNG)・共有リンクコピーボタン
- 優勝者確定時に紙吹雪アニメーション演出
- リーグ戦モードは勝ち点テーブル表示

### ④ 共有閲覧画面
- 閲覧専用URL(編集不可)でトーナメント表を表示
- スマホで見やすいピンチズーム対応

## 4. データ構造
### DBテーブル: tournaments
| カラム | 型 | 説明 |
|---|---|---|
| id | VARCHAR(12) PK | ランダム生成の短縮ID |
| edit_token | VARCHAR(32) | 編集用トークン(SHA256) |
| title | VARCHAR(100) | 大会名 |
| organizer | VARCHAR(100) | 主催者名 |
| event_date | DATE | 開催日 |
| format | ENUM('single','double','league') | 形式 |
| theme | ENUM('sports','game','office') | テーマ |
| participants_json | TEXT | 参加者名と初期シード順(JSON配列) |
| brackets_json | MEDIUMTEXT | 試合組み合わせ・勝者・スコアの全状態(JSON) |
| created_at | DATETIME | 作成日時 |
| updated_at | DATETIME | 最終更新日時 |

- 保存先はDBまたは不要ならJSONファイル保存でも可
- 30日間アクセスがなければ自動削除(cronジョブ)
- ログイン不要。edit_tokenをlocalStorageに保持して編集権限を管理

## 5. デザインの方向性
- ベースカラー: スポーツテーマ=深緑×金、ゲームテーマ=ダークネイビー×シアン、オフィステーマ=白×インディゴ
- トーナメント表: 角丸カード型の対戦マス、勝者マスはカラー強調・敗者マスはグレーアウト
- フォント: 日本語はNoto Sans JP、英字はOswaldを使用しスポーティで読みやすい印象に
- アニメーション: 勝者決定時にマスが光るパルスアニメ、優勝確定時は紙吹雪(Canvas confetti)
- レスポンシブ: スマホでは横スクロール+ピンチズーム、PCでは全体表示を優先