DebateArena - お題討論バトルアプリ

## 1. アプリの目的・ターゲットユーザー
あるテーマ(お題)に対して「賛成派 vs 反対派」の立場で意見を投稿し合い、他ユーザーの共感票(いいね)で勝敗を競うブラウザ完結型の討論バトルアプリ。
小中高生・大学生の論理的思考訓練、就活生のディベート練習、社会人の意見整理など幅広い層をターゲットにする。登録不要のゲスト参加も可能で、気軽にひとことを投じるだけでも楽しめる。

## 2. 主要機能
- **お題一覧 & 今週のトレンドお題**：内製のプリセットお題（政治・生活・SF・学校・ビジネスなど6カテゴリー×各10題 = 60題）を常設。週次で「今週のお題」をピックアップ表示。ユーザーがお題を投稿する機能も搭載（簡易モデレーション：NGワードフィルター）。
- **ディベート投稿**：各お題に「賛成」または「反対」の立場を選んで最大200文字のひとことを投稿。ニックネームのみ入力（登録不要）。同一IPからの同一お題への投稿は1回まで。
- **共感ボタン(Vote)**：各投稿に「なるほど👍」ボタンを設置。票数が多い側が「優勢」バッジを獲得。賛成派・反対派それぞれのVote合計をリアルタイムにプログレスバーで表示。
- **ランキング**：「最も盛り上がったお題TOP10(投稿数順)」「今週の名言投稿ランキング(Vote数順)」を一覧表示。
- **シェア機能**：お題ページのURLをSNS共有ボタン(X・LINE・コピー)で友人に送れる。OGP metaタグ対応。

## 3. 画面構成
### トップページ (index.php)
- ヒーローバナー：「あなたの一票が勝敗を決める！」キャッチコピー
- 今週のトレンドお題カード (大きく1枚)
- カテゴリーフィルタータブ (全て / 生活 / 学校 / ビジネス / SF / 社会 / 雑学)
- お題カードグリッド：各カードにタイトル・投稿数・現在の賛否バー・残り期間を表示
- お題を投稿するボタン → モーダルフォームで投稿

### お題詳細ページ (debate.php?id=xxx)
- お題タイトル + カテゴリーバッジ
- 賛否プログレスバー（青=賛成 / 赤=反対）とVote合計数
- 投稿フォーム：ニックネーム入力・賛成/反対トグルボタン・テキストエリア(200字)・送信
- 投稿一覧：賛成タブ / 反対タブ で切り替え表示。各カードに「なるほど👍 N票」ボタン
- SNSシェアボタン

### ランキングページ (ranking.php)
- 盛り上がりランキング（投稿数TOP10）
- 名言ランキング（今週のVote数TOP10投稿）

## 4. データ構造 (DB テーブル)
```sql
topics テーブル
id INT PK AUTO_INCREMENT
title VARCHAR(100) NOT NULL
category ENUM('life','school','business','sf','society','trivia') NOT NULL
is_preset TINYINT(1) DEFAULT 0 -- 1=内製プリセット
created_at DATETIME
expires_at DATETIME -- NULLは期限なし

posts テーブル
id INT PK AUTO_INCREMENT
topic_id INT FK → topics.id
nickname VARCHAR(30)
stance ENUM('agree','disagree') NOT NULL
body TEXT NOT NULL -- 最大200文字
ip_hash VARCHAR(64) -- sha256(IP) 重複防止用
vote_count INT DEFAULT 0
created_at DATETIME

votes テーブル
id INT PK AUTO_INCREMENT
post_id INT FK → posts.id
ip_hash VARCHAR(64)
created_at DATETIME
UNIQUE KEY (post_id, ip_hash) -- 1IP1票
```

## 5. デザインの方向性
- **カラーパレット**：ダークネイビー(#0f172a)を基調にした「バトル感」のある暗めのUI。賛成=エレクトリックブルー(#3b82f6)、反対=バーミリオンレッド(#ef4444)で統一。
- **フォント**：日本語はNoto Sans JP、見出しは太字でインパクト重視。
- **アニメーション**：投稿送信時にフラッシュエフェクト、Vote時にカウンターが跳ねる小アニメ(CSS Keyframes)。
- **レイアウト**：カード型グリッド、モバイル=1列・タブレット=2列・PC=3列のレスポンシブ対応。
- 全体的に「闘技場」「対戦」のイメージを持たせつつ、過激にならず教育用途でも使えるクリーンなデザインを目指す。