/*
 * La gamification (ECL-40) — au-dessus du design system, jamais contre lui.
 *
 * Trois règles, et la première est celle qui compte :
 *
 *  - **le jaune de la marque reste la marque.** Un badge n'est pas jaune : une
 *    médaille gagnée porte le `--primary` du design system, un état (réussi,
 *    en attente) porte une couleur SÉMANTIQUE, et rien d'autre ne va chercher
 *    `--brand-yellow` — il n'appartient qu'au [AI] du logo (scripts/check-css.js
 *    le vérifie) ;
 *  - aucune couleur littérale, aucun `!important` : tout passe par les jetons
 *    de `dashboard.css`, qui portent déjà le thème sombre ;
 *  - l'animation de la célébration est une POLITESSE : elle est coupée net
 *    par `prefers-reduced-motion`, et l'écran reste lisible sans elle.
 */

/* --------------------------------------------------------- la carte */

.gami-card { display: flex; flex-direction: column; gap: var(--space-3); }
.gami-body { display: flex; flex-direction: column; gap: var(--space-3); }

.gami-level { display: flex; flex-direction: column; gap: var(--space-2); }

.gami-level-head { display: flex; align-items: center; gap: var(--space-3); }
.gami-level-icon { width: 24px; height: 24px; color: var(--primary); flex: none; }
.gami-level-naming { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gami-level-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.gami-level-rank { font-size: 0.8rem; color: var(--text-muted); }

.gami-xp {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

/* La barre de palier. La largeur du remplissage vient du serveur (`ratio`),
 * posée en style de nœud : aucune classe générée par valeur. */
.gami-bar {
  height: 8px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  overflow: hidden;
}
.gami-bar-sm { height: 6px; }
.gami-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-sm);
  transition: width 400ms ease;
}

.gami-level-next { margin: 0; }
.gami-streak { margin: 0; color: var(--text-muted); }
.gami-count { margin: 0; }

/* ------------------------------------------------------ les pastilles */

.gami-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.gami-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
}
/* Gagnée : la couleur de la plateforme, pas le jaune de la marque. */
.gami-pill.is-earned {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.gami-pill-icon { width: 16px; height: 16px; flex: none; }
.gami-pill-label { white-space: nowrap; }

/* ------------------------------------------------- le prochain badge */

.gami-next {
  border-top: 1px dashed var(--border);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.gami-next-title { margin: 0; font-weight: 600; font-size: 0.85rem; }
.gami-next-row { display: flex; align-items: flex-start; gap: var(--space-2); }
.gami-next-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.gami-next-name { font-weight: 600; }

/* --------------------------------------------------- la page Mes badges */

.gami-head { margin-bottom: var(--space-4); }
.gami-title { margin-bottom: var(--space-2); }

.gami-wall { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0; }
.gami-section-title { font-size: 1rem; margin: 0; }

.gami-medals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}

.gami-medal {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
}
.gami-medal.is-earned { border-color: var(--primary); }

.gami-medal-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--bg);
}
.gami-medal.is-earned .gami-medal-disc {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.gami-medal-icon { width: 22px; height: 22px; }

.gami-medal-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.gami-medal-title { margin: 0; font-size: 0.95rem; }
.gami-medal-rule { margin: 0; }
.gami-medal-progress { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- le détail */

.gami-breakdown {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  align-items: baseline;
}
.gami-breakdown dt { color: var(--text-muted); }
.gami-breakdown dd {
  margin: 0;
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.gami-breakdown-count { color: var(--text-muted); font-size: 0.85rem; }
.gami-breakdown-xp { font-weight: 600; }

/* ------------------------------------------------------ le classement */

.gami-board { display: flex; flex-direction: column; gap: var(--space-3); }
.gami-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }

.gami-board-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}
.gami-board-row.is-me { background: var(--primary-soft); }
.gami-board-rank {
  width: 1.6em;
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.gami-board-name { flex: 1; min-width: 0; }
.gami-board-xp { font-weight: 600; font-variant-numeric: tabular-nums; }

.gami-optin { display: flex; flex-direction: column; gap: var(--space-1); }
.gami-optin-label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.gami-optin-card {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

/* ---------------------------------------------------- la célébration */

/*
 * Elle s'ajoute à la pile des toasts : non bloquante, jamais au milieu de
 * l'écran, et elle disparaît seule. Sobre, pas de casino.
 */
.gami-celebrate {
  border: 1px solid var(--primary);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  animation: gami-rise 260ms ease-out;
}
.gami-celebrate-head { display: flex; align-items: center; gap: var(--space-2); }
.gami-celebrate-head strong { flex: 1; }
.gami-celebrate-icon { width: 20px; height: 20px; color: var(--primary); }
.gami-celebrate-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.gami-celebrate-lines li { font-weight: 600; color: var(--primary); }

@keyframes gami-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gami-celebrate { animation: none; }
  .gami-bar-fill { transition: none; }
}

@media (max-width: 640px) {
  .gami-medals { grid-template-columns: 1fr; }
}