デュオリンゴ：デザイン言語としてのゲーミフィケーション

THE DUOLINGO LOOP:

  ┌─────────────┐
  │   TRIGGER    │ ← プッシュ通知（Duoが悲しそうな顔）
  │   External   │   または内的動機（罪悪感、連続記録への不安）
  └──────┬──────┘
         ▼
  ┌─────────────┐
  │   ACTION     │ ← アプリを開き、「レッスン開始」をタップ
  │   (minimal)  │   摩擦：ほぼゼロ（3〜5分のコミットメント）
  └──────┬──────┘
         ▼
  ┌─────────────┐
  │   REWARD     │ ← XP獲得、連続記録維持、リーグ進捗、
  │  (variable)  │   宝箱開封、ハート温存
  └──────┬──────┘
         ▼
  ┌─────────────┐
  │  INVESTMENT  │ ← 連続記録の蓄積（損失回避が強まる）、
  │              │   リーグ順位が懸かる、友人が進捗を見ている
  └──────┬──────┘
         │
         └──────→ （翌日、TRIGGERに戻る）

:root {
  /* Core brand */
  --duo-green: #58cc02;        /* 成功、正解、プライマリCTA */
  --duo-green-dark: #58a700;   /* ホバー/アクティブ状態 */

  /* Gamification signals */
  --duo-blue: #1cb0f6;         /* 情報、進捗、ニュートラル */
  --duo-red: #ff4b4b;          /* ハート、ミス、緊急性 */
  --duo-orange: #ff9600;       /* 連続記録、炎、温かみ */
  --duo-purple: #ce82ff;       /* リーグ、プレミアム、特別 */
  --duo-yellow: #ffc800;       /* XP、報酬、お祝い */
  --duo-pink: #ff86d0;         /* イベント、特別チャレンジ */

  /* Surfaces */
  --background: #ffffff;
  --surface-gray: #e5e5e5;
  --text-primary: #4b4b4b;
  --text-secondary: #afafaf;

  /* CTAのためのシグネチャーグリーングラデーション */
  --cta-gradient: linear-gradient(
    to bottom,
    #78e000 0%,
    #58cc02 100%
  );
}

/* Duolingoの特徴的なボタンスタイル */
.btn-primary {
  background: var(--duo-green);
  color: #ffffff;
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border: none;
  border-bottom: 4px solid var(--duo-green-dark);
  border-radius: 16px;
  padding: 14px 24px;
  cursor: pointer;
  transition: filter 100ms ease;
}

.btn-primary:active {
  border-bottom-width: 0;
  margin-top: 4px;  /* 物理的な押下をシミュレート */
  filter: brightness(0.95);
}

SKILL TREE（簡略化）:
┌─────────────────────────────────────┐
│                                     │
│          ★★★★★                      │  ← レジェンダリー（ゴールド）
│          ┃                          │
│       ┌──╋──┐                       │
│      ★★★ ★★★                        │  ← クラウンレベル 3-5
│       └──╋──┘                       │
│          ┃                          │
│       ┌──╋──┐                       │
│      ★★  ★★                         │  ← クラウンレベル 1-2
│       └──╋──┘                       │
│          ┃                          │
│         ★                           │  ← 新スキル（グレー）
│                                     │
│  ● = 完了  ○ = 利用可能             │
│  ◌ = ロック中                       │
└─────────────────────────────────────┘

LESSON FLOW（15チャレンジ）:

チャレンジ 1-3:   選択式（最も簡単）
                 「正しい翻訳を選んでください」
                 → 認識のみ、産出なし

チャレンジ 4-7:   ワードバンク（中程度）
                 「単語をタップして文を作ってください」
                 → 制約された産出、単語が提示される

チャレンジ 8-11:  タイピング（より難しい）
                 「聞こえた内容を入力してください」
                 → 完全な産出、足場なし

チャレンジ 12-14: 混合形式（最も難しい）
                 スピーキング、リスニング、翻訳
                 → 複数スキルの統合

チャレンジ 15:    多くの場合、より簡単
                 → 成功で終える、ポジティブな気持ち

STREAK DISPLAY:
┌─────────────────────────────────────┐
│                                     │
│           🔥 247                     │
│         日連続                       │
│                                     │
│  月    火    水    木    金    土  日  │
│   ●    ●    ●    ●    ●    ○    ○   │
│                                     │
│  ○ = まだ完了していない              │
│  ● = 完了（緑のチェック）            │
│                                     │
│  「レッスンを完了して                │
│   連続記録を伸ばそう！」             │
│                                     │
└─────────────────────────────────────┘

/* 連続記録の炎アニメーション — 一日が進むにつれ緊急度が増す */
.streak-icon {
  animation: flame-idle 2s ease-in-out infinite;
}

/* リスク状態（今日まだ練習していない、夕方） */
.streak-icon--at-risk {
  animation: flame-urgent 0.8s ease-in-out infinite;
  filter: saturate(1.3);
}

@keyframes flame-idle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.05) rotate(2deg); }
}

@keyframes flame-urgent {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  25% { transform: scale(1.1) rotate(3deg); }
  50% { transform: scale(1.05) rotate(-2deg); }
  75% { transform: scale(1.08) rotate(2deg); }
}

DUOの感情状態：

😊 嬉しい        → 正解、連続記録維持
😢 悲しい        → プッシュ通知（「寂しいよ」）
😤 イライラ      → 連続して間違えた時
🥳 お祝い        → レッスン完了、新しい実績
😴 眠っている    → 今日まだアプリを開いていない
🤩 興奮          → 新機能、連続記録マイルストーン
😭 泣いている    → 連続記録が途切れそう
💀 死亡          → 連続記録が途切れた（最終手段）
🎓 誇り          → コース修了、レジェンダリーレベル

正解の場合：
┌─────────────────────────────────────┐
│                                     │
│  ✓ すばらしい！                     │  ← 緑のバナー
│                                     │  ← ポジティブな効果音
│  [ 続ける ]                         │  ← 即座に前進
│                                     │
└─────────────────────────────────────┘

不正解の場合：
┌─────────────────────────────────────┐
│                                     │
│  ✗ 正しい答え：                     │  ← 赤いバナー（怖い赤ではない）
│    "Je suis un homme"              │  ← 正解を表示
│                                     │  ← 穏やかな「不正解」の音
│  [ わかった ]                       │  ← 認識であり、罰ではない
│                                     │
└─────────────────────────────────────┘

/* 不正解 — 明確だが怖くない */
.feedback-incorrect {
  background: var(--duo-red);
  color: #ffffff;
  padding: 16px 24px;
  border-radius: 16px 16px 0 0;
  animation: slide-up 200ms ease-out;
}

/* プログレスバーは前進し続ける */
.progress-bar {
  height: 16px;
  border-radius: 8px;
  background: var(--surface-gray);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--duo-green);
  border-radius: 8px;
  transition: width 300ms ease-out;
  /* 不正解でもプログレスはわずかに進む */
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}