/* ═══════════════════════════════════════════
   MarketingOS — Gamification Styles
   XP Bar, Badges, Progress Rings, Levels
   ═══════════════════════════════════════════ */

/* ── XP Toast ── */
.xp-toast-container { position: fixed; top: var(--topbar-height); right: var(--space-6); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; }
.xp-toast { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: rgba(19,19,31,0.95); border: 1px solid rgba(189,255,71,0.3); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--accent-lime); box-shadow: var(--shadow-glow-lime); animation: xpToastIn 0.4s var(--transition-spring) forwards, xpToastOut 0.3s ease-in 2s forwards; backdrop-filter: blur(8px); }
@keyframes xpToastIn { from { opacity: 0; transform: translateX(40px) scale(0.9); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes xpToastOut { to { opacity: 0; transform: translateY(-20px) scale(0.9); } }

/* ── Level Up Modal ── */
.level-up-overlay { position: fixed; inset: 0; background: rgba(7,7,15,0.9); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease-out; }
.level-up-card { text-align: center; padding: var(--space-12); animation: bounceIn 0.6s cubic-bezier(0.34,1.56,0.64,1); }
.level-up-card .level-icon { font-size: 4rem; animation: float 2s ease-in-out infinite; margin-bottom: var(--space-4); }
.level-up-card h2 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-bold); margin-bottom: var(--space-2); background: linear-gradient(135deg, var(--accent-lime), var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.level-up-card .level-name { font-size: var(--text-xl); color: var(--text-secondary); margin-bottom: var(--space-6); }

/* ── Badge Unlock ── */
.badge-unlock-card { text-align: center; padding: var(--space-8); background: var(--bg-card); border: 1px solid var(--accent-gold); border-radius: var(--radius-xl); box-shadow: 0 0 48px rgba(255,209,102,0.2); animation: scaleIn 0.5s var(--transition-spring); }
.badge-unlock-card .badge-icon-large { font-size: 3.5rem; margin-bottom: var(--space-4); animation: float 2.5s ease-in-out infinite; }
.badge-unlock-card h3 { font-family: var(--font-display); font-size: var(--text-2xl); margin-bottom: var(--space-2); color: var(--accent-gold); }
.badge-unlock-card p { color: var(--text-secondary); font-size: var(--text-sm); }

/* ── Progress Ring (SVG) ── */
.progress-ring { transform: rotate(-90deg); }
.progress-ring-bg { fill: none; stroke: var(--bg-card); }
.progress-ring-fill { fill: none; stroke: var(--accent-lime); stroke-linecap: round; transition: stroke-dashoffset 1s ease-out; }
.progress-ring-label { transform: rotate(90deg); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); fill: var(--text-primary); text-anchor: middle; dominant-baseline: central; }

/* ── Streak Badge ── */
.streak-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--accent-coral); }
.streak-badge .flame { animation: pulse 1.5s ease-in-out infinite; }

/* ── Badge Collection ── */
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4); }
.badge-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; transition: all var(--transition-base); }
.badge-card.earned { border-color: var(--accent-gold); box-shadow: 0 0 24px rgba(255,209,102,0.1); }
.badge-card.locked { opacity: 0.4; filter: grayscale(1); }
.badge-card .badge-emoji { font-size: 2rem; margin-bottom: var(--space-2); }
.badge-card .badge-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.badge-card .badge-desc { font-size: var(--text-xs); color: var(--text-muted); }

/* ── Dashboard Stats ── */
.stats-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.stat-card { flex: 1; min-width: 120px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.stat-card .stat-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); margin-bottom: var(--space-1); }
.stat-card .stat-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Confetti Particles ── */
.confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-confetti); overflow: hidden; }
.confetti-piece { position: absolute; width: 10px; height: 10px; border-radius: 2px; animation: confettiFall var(--duration, 3s) linear forwards; top: -20px; left: var(--x, 50%); }