/* Phase 3: quests, streaks, badges (trophy wall). */

.section-title { font: 800 13px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 10px; }

/* Streak */
.streak-card { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 22px; background: var(--surface-2); margin-top: 6px; }
.streak-card.counted { background: linear-gradient(135deg, rgba(226, 98, 42, .16), rgba(211, 155, 20, .12)); }
.streak-num { display: grid; justify-items: center; min-width: 72px; color: var(--fin); }
.streak-num svg { width: 30px; height: 30px; fill: currentColor; }
.streak-num b { font: 800 34px/1 var(--f-display); color: var(--ink); }
.streak-num small { font-size: 11px; color: var(--ink-3); }
.streak-info p { margin: 0 0 4px; }
.freezes { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.freezes i { width: 10px; height: 10px; border-radius: 3px; background: var(--line); }
.freezes i.on { background: #5fb3e6; }
.flame { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; color: var(--fin); vertical-align: middle; }
.flame svg { width: 16px; height: 16px; fill: currentColor; }
.flame small { font-size: 10px; color: var(--ink-3); }

/* Quests */
.quests, .trophies { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quest, .trophy { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--surface-2); }
.qic, .medal { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; background: var(--bg); color: var(--ink-2); }
.q-easy .qic { color: var(--olive); }
.q-medium .qic { color: #2f9a8f; }
.q-stretch .qic { color: var(--fin); }
.quest.done .qic { background: var(--olive); color: #fff; }
.qbody, .tbody { min-width: 0; display: grid; gap: 3px; }
.qbody small, .tbody small { color: var(--ink-3); font-size: 12px; }
.qbar { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 3px; }
.qbar i { display: block; height: 100%; background: var(--fin); border-radius: 3px; }
.quest.done .qbar i { background: var(--olive); }
.qside { display: grid; justify-items: end; gap: 4px; font-size: 12px; }

/* Trophy wall */
.medal { border-radius: 50%; font-size: 13px; border: 3px solid var(--line); }
.tier-bronze .medal { border-color: #b8743a; color: #b8743a; }
.tier-silver .medal { border-color: #a8b0b8; color: #7d8790; }
.tier-gold .medal { border-color: #d39b14; color: #d39b14; background: rgba(211, 155, 20, .12); }
.tier-none { opacity: .75; }
.pips { display: flex; gap: 4px; }
.pips i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.pips i.bronze { background: #b8743a; }
.pips i.silver { background: #a8b0b8; }
.pips i.gold { background: #d39b14; }

/* XP line detail (quest name, streak length) on the reveal screen */
.xplines li span small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 500; }