/* ============================================================
   MAPi · MON PERSONNAGE (préfixe pe-)
   L'écran de composition de l'avatar. Deux colonnes : à gauche ce
   qu'on obtient (et il MARCHE, parce que c'est ainsi qu'on le verra),
   à droite ce qu'on choisit. La preuve avant le catalogue.
   ============================================================ */
.pe-ovl {
    position: fixed; inset: 0; z-index: 300;
    display: none; align-items: center; justify-content: center; padding: 24px;
    background: rgba(9, 30, 66, .55); backdrop-filter: blur(4px);
}
.pe-ovl.is-open { display: flex; }
body.pe-fige { overflow: hidden; }
.pe-box {
    display: flex; flex-direction: column;
    width: min(940px, 100%); max-height: min(700px, 92dvh);
    background: var(--surface); border-radius: 20px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(9, 30, 66, .4);
}
@media (prefers-reduced-motion: no-preference) {
    .pe-ovl.is-open .pe-box { animation: pe-in .28s cubic-bezier(.22, 1, .36, 1) both; }
    @keyframes pe-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
}
.pe-h { position: relative; padding: 20px 60px 16px 22px; border-bottom: 1px solid var(--gray-200); }
.pe-h b { display: block; font-family: 'Museo Sans', 'Mukta Mahee', sans-serif; font-weight: 900; font-size: 19px; color: var(--text-primary); }
.pe-h small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-secondary); }
.pe-x {
    position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid var(--gray-300); background: var(--surface); color: var(--text-secondary); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.pe-x:hover { border-color: var(--blue); background: var(--blue-pale); color: var(--blue-dark); }

.pe-corps { display: grid; grid-template-columns: 268px minmax(0, 1fr); flex: 1; min-height: 0; }

/* ---------- L'aperçu ----------
   Un sol, pas un damier de logiciel de dessin : l'avatar se juge posé
   quelque part. Le tapis de lumière et l'ombre au pied suffisent à
   dire « il est dans un lieu ». */
.pe-vue {
    display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 18px;
    border-right: 1px solid var(--gray-200);
    background:
        radial-gradient(120% 70% at 50% 92%, rgba(0, 109, 236, .10), transparent 62%),
        linear-gradient(180deg, var(--gray-100), var(--surface));
}
.pe-scene { position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; }
.pe-scene::after {
    content: ''; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
    width: 62px; height: 15px; border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(9, 30, 66, .26), transparent 72%);
}
/* LE CANEVAS EST PLUS LARGE QUE LE PERSONNAGE : une monture fait deux
   tuiles de large et une voiture quatre de haut. Le CSS suit l'attribut
   du canevas au pixel près, sinon tout se retrouve rétréci d'un tiers
   sans que rien ne le dise. */
.pe-cv { position: relative; z-index: 1; image-rendering: pixelated; width: 200px; height: 216px; }
.pe-dirs { display: inline-flex; gap: 3px; padding: 4px; background: var(--gray-100); border: 1.5px solid var(--gray-300); border-radius: var(--radius-pill); }
.pe-dir {
    min-height: 32px; padding: 0 13px; border: none; border-radius: var(--radius-pill); background: none;
    font: inherit; font-size: 11.5px; font-weight: 800; color: var(--text-secondary); cursor: pointer;
}
.pe-dir:hover { background: var(--surface); color: var(--text-primary); }
.pe-dir.is-on { background: var(--surface); color: var(--blue-dark); box-shadow: 0 1px 3px rgba(9, 30, 66, .14); }
.pe-hasard {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px;
    border: 1.5px dashed var(--gray-300); border-radius: var(--radius-pill); background: none;
    font: inherit; font-size: 12.5px; font-weight: 800; color: var(--text-secondary); cursor: pointer;
}
.pe-hasard:hover { border-color: var(--blue); border-style: solid; color: var(--blue-dark); background: var(--blue-pale); }

/* ---------- Le catalogue ---------- */
.pe-choix { display: flex; flex-direction: column; min-height: 0; }
.pe-ongl { display: flex; gap: 2px; padding: 10px 14px 0; border-bottom: 1.5px solid var(--gray-200); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pe-ongl::-webkit-scrollbar { display: none; }
.pe-ongl::-webkit-scrollbar { display: none; }
.pe-o {
    flex: none; min-height: 40px; padding: 0 14px; border: none; border-bottom: 2.5px solid transparent; background: none;
    font: inherit; font-size: 13px; font-weight: 800; color: var(--text-secondary); cursor: pointer;
    margin-bottom: -1.5px; white-space: nowrap;
}
.pe-o:hover { color: var(--text-primary); }
.pe-o[aria-selected="true"] { color: var(--blue-dark); border-bottom-color: var(--blue); }
.pe-grille {
    flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; padding: 14px;
    align-content: start;
}
.pe-i {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    height: 100px; padding: 4px 4px 3px;
    border: 1.5px solid var(--gray-200); border-radius: 12px; background: var(--gray-100);
    cursor: pointer; overflow: hidden;
}
.pe-i:hover { border-color: var(--blue-muted); background: var(--surface); }
.pe-i.is-on { border-color: var(--blue); background: var(--blue-pale); box-shadow: inset 0 0 0 1px var(--blue); }
.pe-i canvas { image-rendering: pixelated; width: 32px; height: 64px; }
.pe-i--non { justify-content: center; border-style: dashed; }
.pe-non { font-size: 11px; font-weight: 800; color: var(--text-secondary); }
/* Les accessoires portent un nom : « Monocle » se choisit mieux que « 16 ». */
.pe-lab {
    width: 100%; margin-top: 1px; font-size: 9.5px; font-weight: 800; line-height: 1.15;
    text-align: center; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pe-i.is-on .pe-lab { color: var(--blue-dark); }

/* ---------- Le nuancier du modèle retenu ---------- */
.pe-nuancier {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border-top: 1.5px solid var(--gray-200); background: var(--gray-100);
}
.pe-nuancier[hidden] { display: none; }
.pe-nlab { flex: none; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.pe-nlist { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.pe-n {
    flex: none; display: flex; align-items: flex-end; justify-content: center;
    width: 44px; height: 46px; padding: 0; overflow: hidden;
    border: 1.5px solid var(--gray-300); border-radius: 10px; background: var(--surface); cursor: pointer;
}
.pe-n:hover { border-color: var(--blue-muted); }
.pe-n.is-on { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: var(--blue-pale); }
/* On coupe la tête : un coloris se lit au torse et aux jambes, et
   quinze fois le même visage ne dit rien de ce qu'on choisit. */
.pe-n canvas { image-rendering: pixelated; width: 32px; height: 64px; margin: -20px 0 -2px; }

.pe-f { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--gray-200); }

@media (max-width: 760px) {
    .pe-ovl { padding: 0; }
    .pe-box { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
    .pe-corps { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .pe-vue { flex-direction: row; gap: 12px; border-right: none; border-bottom: 1px solid var(--gray-200); padding: 12px 14px; }
    .pe-scene { padding-bottom: 6px; }
    .pe-scene::after { width: 42px; height: 11px; bottom: 2px; }
    .pe-cv { width: 150px; height: 162px; }
    .pe-dirs { flex-wrap: wrap; }
    .pe-hasard { min-height: 36px; padding: 0 12px; }
    .pe-grille { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); padding: 10px; gap: 6px; }
    .pe-i { height: 86px; }
}

/* ============================================================
   L'ÉQUIPEMENT : véhicule et monture (préfixe pe-, suffixe --eq)
   Deux onglets de plus dans la même rangée, séparés du corps par
   un trait : cinq calques de ce qu'on EST, deux équipements de ce
   qu'on MONTE. Sans le trait, sept onglets de même rang et l'on
   cherche.
   ============================================================ */
.pe-osep {
    flex: none; width: 1px; align-self: stretch; margin: 4px 4px;
    background: var(--gray-300);
}
/* Une case d'équipement est plus large qu'une case de calque : elle
   porte un nom, et « Planche flottante » ne tient pas sous 32 px. */
.pe-i--eq { width: auto; min-width: 76px; padding-bottom: 4px; }
.pe-i--eq canvas { width: 48px; height: 48px; }
.pe-i--eq .pe-lab { max-width: 88px; }
.pe-n canvas { display: block; }
.pe-vide { margin: 12px 4px; font-size: 12.5px; color: var(--text-secondary); }
/* La vignette d'une carrosserie est plus haute que large : une voiture
   vue de dessus tient debout dans sa case. */
.pe-n--auto { width: auto; height: auto; padding: 3px; }
.pe-n--auto canvas { image-rendering: pixelated; }
.pe-i--eq canvas { image-rendering: pixelated; }
/* La scène de l'aperçu a grandi pour qu'une monture y tienne en entier :
   le cadre suit, sinon la voiture et la chèvre débordaient. */
.pe-scene { min-height: 216px; }
/* L'ombre décorative du socle s'élargit avec la scène, sinon elle
   dessine un disque sous le pied gauche d'une monture qui la déborde. */
.pe-scene::after { width: 88px; }