/* KICKOFF · "Compléter mon effectif" + bandeau d'accueil.
   Réutilise les classes d'onboarding (.onb-*, .club-*, .pill, .card) et n'ajoute
   que le spécifique. S'appuie sur tokens.css (ne le modifie pas). */

.roster { display: flex; flex-direction: column; gap: 16px; }

.rc-slash { color: var(--red); text-shadow: 0 0 12px rgba(37, 99, 235, .7); font-style: italic; }

/* rappel de l'effectif déjà en place */
.rc-current { display: flex; flex-direction: column; gap: 8px; }
.rc-current .kicker { margin-left: 2px; }
.rc-have-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-have {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px;
}
.rc-have-name { font-family: var(--disp); font-style: italic; font-weight: 700; font-size: 13px; color: var(--txt); }
.rc-have-div {
  font-family: var(--disp); text-transform: uppercase; letter-spacing: .06em;
  font-size: 9px; font-weight: 700; color: var(--muted);
}

/* ---------- bandeau d'accueil : effectif incomplet ---------- */
.roster-cta {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(37, 99, 235, .16), var(--ink-2));
  border-color: rgba(37, 99, 235, .42);
  transition: transform .12s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.roster-cta:active { transform: scale(.99); }
.roster-cta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.roster-cta-h {
  font-family: var(--disp); font-style: italic; font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; font-size: 16px; color: var(--txt);
}
.roster-cta-h .rc-slash { padding-left: 3px; }
.roster-cta .muted { font-size: 12.5px; line-height: 1.35; }
.roster-cta-go {
  flex: none; display: flex; align-items: center;
  font-family: var(--disp); font-style: italic; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 12px; color: #fff;
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  border-radius: 10px; padding: 10px 14px; box-shadow: var(--glow-red);
}