/* PracticePilot — Gamification + Motivation + Student Progress Experience
   2.0 (Phase 11), mounted into the EXISTING [practicepilot_dashboard] page
   as a separate, self-contained section below Performance Analytics.
   Strongly scoped under .ppilot-gam-*; reuses the SAME --ppilot-* color
   tokens as every other dashboard module — no new color system invented.
   Mobile-first discipline, identical to performance-analytics.css: no
   fixed widths beyond the host container, cards stack to a single column
   before anything can overflow horizontally. Status is never communicated
   by color alone — every achievement/streak/progress state also carries
   text (§32 of the spec). */

.ppilot-gam-wrap {
	max-width: 1080px; width: 100%; margin: 28px auto 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--ppilot-ink);
}
.ppilot-gam-wrap, .ppilot-gam-wrap * { box-sizing: border-box; min-width: 0; }

.ppilot-gam-heading { font-size: 20px; font-weight: 800; margin: 0 0 14px; letter-spacing: -0.01em; color: var(--ppilot-navy); }

.ppilot-gam-loading, .ppilot-gam-error, .ppilot-gam-empty {
	display: flex; align-items: center; justify-content: center; text-align: center;
	padding: 36px 20px; background: #fff; border: 1px solid var(--ppilot-border);
	border-radius: 20px; margin-bottom: 20px; color: var(--ppilot-muted); font-size: 14px;
}
.ppilot-gam-error { color: var(--ppilot-danger); }

.ppilot-gam-unlocked-banner {
	background: #ecfdf5; border: 1px solid #059669; border-radius: 14px;
	padding: 10px 14px; margin-bottom: 16px; color: #047857; font-weight: 700; font-size: 13px;
}
.ppilot-gam-unlocked-banner p { margin: 2px 0; }

.ppilot-gam-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }

.ppilot-gam-card {
	background: #fff; border: 1px solid var(--ppilot-border); border-radius: 18px;
	padding: 16px; box-shadow: 0 1px 2px rgba(30, 27, 75, 0.04);
}
.ppilot-gam-card-wide { grid-column: 1 / -1; }
.ppilot-gam-card-title { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--ppilot-navy); }

.ppilot-gam-empty-line { color: var(--ppilot-muted); font-size: 13px; margin: 0; }

/* Level / XP */
.ppilot-gam-level-badge {
	display: inline-block; background: var(--ppilot-navy); color: #fff; font-weight: 800;
	font-size: 13px; padding: 4px 12px; border-radius: 999px; margin-bottom: 8px;
}
.ppilot-gam-xp-line { font-size: 18px; font-weight: 800; margin-bottom: 8px; }

/* Progress bar — accessible via role=progressbar + aria-value*, never color-only. */
.ppilot-gam-progress {
	background: var(--ppilot-bg); border-radius: 999px; height: 10px; overflow: hidden; margin: 6px 0;
}
.ppilot-gam-progress-fill { background: var(--ppilot-navy); height: 100%; border-radius: 999px; transition: width 0.2s ease; }

/* Streak */
.ppilot-gam-streak-value { font-size: 22px; font-weight: 800; margin-bottom: 4px; }

/* Today */
.ppilot-gam-today-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ppilot-gam-stat { text-align: center; background: var(--ppilot-bg); border-radius: 12px; padding: 8px 4px; }
.ppilot-gam-stat-value { display: block; font-size: 16px; font-weight: 800; }
.ppilot-gam-stat-label { display: block; font-size: 10px; color: var(--ppilot-muted); margin-top: 2px; }

/* Week */
.ppilot-gam-comparison { font-weight: 600; }

/* Next goal */
.ppilot-gam-goal-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }

/* Achievements */
.ppilot-gam-achv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ppilot-gam-achv {
	border: 1px solid var(--ppilot-border); border-radius: 14px; padding: 10px 12px;
	background: var(--ppilot-bg);
}
.ppilot-gam-achv-unlocked { background: #ecfdf5; border-color: #059669; }
.ppilot-gam-achv-progress { background: #fffbeb; border-color: #b45309; }
.ppilot-gam-achv-locked { background: var(--ppilot-bg); opacity: 0.85; }
.ppilot-gam-achv-label { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.ppilot-gam-achv-state { display: block; font-size: 11px; color: var(--ppilot-muted); margin-bottom: 4px; }

/* Journey */
.ppilot-gam-journey { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ppilot-gam-journey-step {
	display: flex; align-items: center; justify-content: space-between;
	padding: 8px 12px; border-radius: 10px; font-size: 13px; background: var(--ppilot-bg);
}
.ppilot-gam-journey-unlocked { background: #ecfdf5; color: #047857; font-weight: 700; }
.ppilot-gam-journey-progress { background: #fffbeb; color: #b45309; }
.ppilot-gam-journey-locked { color: var(--ppilot-muted); }
.ppilot-gam-journey-pct { font-size: 11px; font-weight: 700; }

@media ( max-width: 900px ) {
	.ppilot-gam-grid { grid-template-columns: 1fr; }
	.ppilot-gam-achv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 480px ) {
	.ppilot-gam-wrap { margin-top: 20px; }
	.ppilot-gam-card { padding: 12px; }
	.ppilot-gam-heading { font-size: 17px; }
	.ppilot-gam-today-grid { grid-template-columns: repeat(2, 1fr); }
	.ppilot-gam-achv-grid { grid-template-columns: 1fr; }
}