.setup-top{ display:flex; align-items:center; justify-content:space-between; gap:1em; margin-bottom:clamp(18px,4vw,32px); }
.setup-dots{ display:flex; gap:.4em; }
.setup-dots i{ width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,.16); transition:all .3s var(--ease); }
.setup-dots i.on{ width:22px; background:var(--violet); }
.setup-dots i.done{ background:rgba(155,107,255,.5); }
.setup-head{ text-align:center; margin-bottom:clamp(18px,3.5vw,30px); }
.setup-title{ font-size:clamp(1.5rem,4.4vw,var(--fs-2xl)); font-weight:900; display:inline-flex; align-items:center; gap:.4em; }
.setup-sub{ color:var(--txt-2); font-size:var(--fs-md); margin-top:.5em; }
.setup-grid{ display:grid; gap:.75em; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); }
.pick{
  cursor:pointer; text-align:left; padding:1em 1.15em; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line); color:var(--txt);
  transition:transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.pick:hover{ transform:translateY(-3px); border-color:var(--violet); background:var(--surface-2); box-shadow:var(--sh-glow); }
.pick-t{ font-family:var(--f-title); font-weight:800; font-size:var(--fs-lg); display:flex; align-items:center; gap:.45em; }
.pick-d{ font-size:var(--fs-sm); color:var(--txt-2); margin-top:.4em; }
.pick-s{ font-size:var(--fs-xs); color:var(--violet); font-weight:700; margin-top:.5em; letter-spacing:.01em; }
.pick--compact{ text-align:center; padding:.9em .6em; }
.pick--compact .pick-t{ justify-content:center; font-size:var(--fs-md); flex-direction:column; gap:.3em; }
.pick--compact .pick-flag{ font-size:1.90rem; }
.setup-grid--compact{ grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); }
.setup-groupt{
  grid-column:1/-1; font-family:var(--f-title); font-weight:800; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3); margin-top:.6em;
}

/* --- étape de saisie du pseudo --- */
.setup-grid--single{ grid-template-columns:minmax(0,520px); justify-content:center; }
.pseudo-box{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg);
  padding:clamp(22px,4vw,32px); box-shadow:var(--sh-2);
}
.pseudo-label{
  display:block; font-family:var(--f-title); font-weight:800; font-size:var(--fs-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3); margin-bottom:.7em;
}
.pseudo-row{ display:flex; gap:.6em; align-items:center; }
.pseudo-input{
  flex:1; min-width:0; padding:.75em 1em; border-radius:var(--r-md);
  background:rgba(255,255,255,.06); border:1px solid var(--line-strong); color:var(--txt);
  font-family:var(--f-title); font-weight:800; font-size:var(--fs-xl); letter-spacing:-.01em;
}
.pseudo-input::placeholder{ color:var(--txt-3); font-weight:600; letter-spacing:0; }
.pseudo-input:focus{ outline:none; border-color:var(--violet); box-shadow:var(--sh-glow); }
.dice--big{ width:2.6em; height:2.6em; font-size:1.1em; flex:none; }
.pseudo-hint{ font-size:var(--fs-sm); color:var(--txt-3); margin:.8em 0 1.4em; }

/* --- pastille de ville : le pictogramme au-dessus du nom --- */
.pick--compact{ display:flex; flex-direction:column; align-items:center; gap:.4em; }
.pick--compact .pick-flag{ font-size:2rem; line-height:1; }
.pick--compact .pick-t{ font-size:var(--fs-sm); text-align:center; }

/* --- étape personnage : genre puis visages --- */
.gender-row{ display:flex; gap:.6em; margin-bottom:1.2em; }
.gender{
  flex:1; padding:.9em 1em; border-radius:var(--r-md); cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--line-strong); color:var(--txt);
  font-family:var(--f-title); font-weight:800; font-size:var(--fs-lg);
  transition:all .16s var(--ease);
}
.gender:hover{ border-color:var(--violet); background:var(--violet-soft); }
.gender.is-on{ background:linear-gradient(135deg,var(--violet),var(--violet-2)); border-color:transparent; color:#fff; box-shadow:var(--sh-glow); }

.face-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:.55em; margin-bottom:1.3em; }
@media (max-width:520px){ .face-grid{ grid-template-columns:repeat(4,1fr); } }
.face{
  padding:0; border-radius:var(--r-md); overflow:hidden; cursor:pointer; aspect-ratio:1;
  background:var(--surface-2); border:2px solid transparent;
  transition:transform .15s var(--ease), border-color .15s var(--ease);
}
.face svg{ width:100%; height:100%; display:block; }
.face:hover{ transform:translateY(-3px) scale(1.04); border-color:var(--line-strong); }
.face.is-on{ border-color:var(--violet); box-shadow:var(--sh-glow); transform:translateY(-3px); }