/* Les ecrans du profil joueur (19/09) : « Qui joue ? », creation en trois
   etapes (pseudo, avatar, drapeau), code de secours, retrouver son profil,
   page du profil. Le style de l'ecran des personnages : son fond, ses
   cartes bleues, la police Lilita One, le bouton jaune et le rond retour.
   Tout se mesure en hauteur d'ecran (vh), comme css/raquettes.css : la page
   garde ses proportions de l'ordinateur au telephone couche.
   Spec : docs/superpowers/specs/2026-09-19-profil-joueur-design.md. */

#qui-joue.screen,
#profil.screen { display: block; padding: 0; overflow: hidden; }

.pf-page {
  position: absolute; inset: 0;
  background: url('../assets/ui/selection/fond.webp') center / cover no-repeat, #081640;
  font-family: 'Montserrat', var(--font);
  color: #fff;
  --lettrage: 'Lilita One', 'Arial Rounded MT Bold', 'Segoe UI Black', var(--font);
}

/* Le attribut hidden doit l'emporter sur les display: flex ci-dessous. */
.pf-page [hidden] { display: none !important; }

.pf-retour {
  z-index: 3;
  position: absolute; top: 4vh; left: 3vw; width: 10vh; height: 10vh;
  padding: 0; border: 0; cursor: pointer;
  background: url('../assets/ui/selection/rond-retour.webp?v=1') center / contain no-repeat;
}

.pf-titre {
  position: absolute; top: 5.5vh; left: 16vw; right: 16vw;
  margin: 0; text-align: center;
  font-family: var(--lettrage); font-weight: 400; font-size: 6vh; line-height: 1;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: #fff; text-shadow: 0 0.5vh 0 #0a1a4a, 0 0 2vh rgba(80, 190, 255, 0.5);
}

/* ---- Les cartes : une tuile par profil, les avatars ---- */
.pf-tuiles {
  position: absolute; top: 18vh; left: 6vw; right: 6vw; height: 54vh;
  display: flex; gap: 1.8vw; justify-content: safe center;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 1.5vh 0;
}
.pf-tuiles::-webkit-scrollbar { display: none; }

.pf-carte {
  flex: 0 0 18vw; scroll-snap-align: start;
  display: flex; flex-direction: column; overflow: hidden;
  padding: 0; cursor: pointer; color: #fff;
  border: 0.55vh solid #3b82e6; border-radius: 2.2vh;
  background: linear-gradient(160deg, #1d56c4, #0a1f5e);
  box-shadow: 0 0.8vh 1.6vh rgba(0, 0, 0, 0.35);
}
.pf-carte img,
.pf-carte .pf-icone {
  flex: 1; min-height: 0; width: 100%;
  object-fit: cover; object-position: 50% 20%;
}
.pf-carte .pf-icone { display: grid; place-items: center; color: #9fd0ff; }
.pf-carte .pf-icone svg { width: 45%; height: 45%; }
.pf-carte b {
  display: block; padding: 1vh 0.6vw 0.3vh;
  font-family: var(--lettrage); font-weight: 400; font-size: 3.4vh; line-height: 1;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #061340;
}
.pf-carte small {
  display: flex; align-items: center; justify-content: center; gap: 0.6vw;
  padding: 0 0.6vw 1vh; min-height: 3.4vh;
  font: 700 1.9vh/1 'Montserrat', var(--font); color: #9fc3ff;
  background: #061340;
}
.pf-carte small svg { width: 3.2vh; height: 2.2vh; border-radius: 0.3vh; }
.pf-carte.choisie,
.pf-carte[aria-selected="true"] {
  border-color: #9fe0ff;
  box-shadow: 0 0 0 0.4vh rgba(120, 215, 255, 0.55), 0 0 3vh rgba(90, 200, 255, 0.85);
}
.pf-carte:focus-visible { outline: 0.5vh solid #ffd34d; outline-offset: 0.3vh; }

.pf-liens {
  position: absolute; left: 0; right: 0; bottom: 6vh; margin: 0;
  display: flex; justify-content: center; gap: 5vw;
}
.pf-lien {
  padding: 1.2vh 1vw; border: 0; background: none; cursor: pointer;
  font: 700 max(2.8vh, 12px)/1 'Montserrat', var(--font); color: #cfe3ff;
  text-decoration: underline; text-underline-offset: 0.5vh;
}

/* ---- Une vue a la fois ---- */
.pf-vue {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 2vh; padding: 17vh 4vw 26vh; box-sizing: border-box;
}

.pc-etape { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.6vh; }

.pf-champ {
  display: block; box-sizing: border-box; width: 56vw; margin: 2vh auto 0;
  padding: 1.6vh 2vw; text-align: center;
  font-family: var(--lettrage); font-weight: 400; font-size: 6vh; line-height: 1;
  color: #fff; background: #061340;
  border: 0.55vh solid #3b82e6; border-radius: 2.2vh; outline: none;
}
.pf-champ:focus { border-color: #9fe0ff; box-shadow: 0 0 2.4vh rgba(90, 200, 255, 0.7); }
.pf-champ-code { font-size: 5vh; letter-spacing: 0.08em; text-transform: uppercase; }
.pf-champ::placeholder { color: rgba(207, 227, 255, 0.35); }

.pf-aide, .pk-explique {
  margin: 0; max-width: 70vw; text-align: center;
  font: 600 max(3vh, 12px)/1.35 'Montserrat', var(--font); color: #cfe3ff;
}

.pf-bande {
  width: 100%; height: 44vh;
  display: flex; gap: 1.6vw; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding: 1vh 0;
}
.pf-bande::-webkit-scrollbar { display: none; }
.pf-bande .pf-carte { flex-basis: 15vw; }

/* Des rangees de hauteur FIXE (3/2 de la largeur d'une colonne) : laissees
   libres, elles s'ecrasaient dans la colonne et les drapeaux se
   chevauchaient (capture du 19/09). La grille defile si elle deborde. */
.pf-grille-drapeaux {
  width: 100%; max-height: 46vh; overflow-y: auto; scrollbar-width: thin; flex: 0 1 auto;
  display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 6.4vw; gap: 1.4vh 1.2vw;
  padding: 1vh 0.6vw; box-sizing: border-box;
}
.pf-drapeau {
  height: 100%; padding: 0; cursor: pointer; overflow: hidden;
  border: 0.45vh solid #3b82e6; border-radius: 1.2vh; background: #061340;
}
.pf-drapeau svg { display: block; width: 100%; height: 100%; }
.pf-drapeau[aria-selected="true"] {
  border-color: #9fe0ff;
  box-shadow: 0 0 0 0.4vh rgba(120, 215, 255, 0.55), 0 0 2.4vh rgba(90, 200, 255, 0.85);
}

/* Sous le champ, sur un bandeau rouge : lisible au telephone (a 2,5 vh en
   bas a gauche, on ne le voyait pas — capture du 19/09). */
.pf-erreur {
  margin: 0; max-width: 64vw; padding: 1.2vh 2.4vw; border-radius: 1.6vh;
  font: 700 max(3.2vh, 12px)/1.3 'Montserrat', var(--font); color: #fff; text-align: center;
  background: rgba(179, 32, 42, 0.92); border: 0.3vh solid #ff8a8a;
  box-shadow: 0 0.6vh 1.6vh rgba(0, 0, 0, 0.45);
}
.pf-erreur:empty { display: none; }

/* Le bouton jaune de l'ecran des personnages (.st-jaune / .st-valider),
   texte compris : Lilita droit a la taille heritee (mesure le 19/09). */
.pf-jaune {
  z-index: 2;
  position: absolute; right: 3vw; bottom: 5vh; width: 42vw; height: 17vh;
  display: flex; align-items: center; justify-content: center; gap: 2vw;
  padding: 0; border: 0; cursor: pointer;
  font-family: var(--lettrage); font-weight: 400; font-style: normal; font-size: inherit; line-height: 1;
  text-transform: uppercase; color: #2a1300;
  background: url('../assets/ui/selection/bouton-jaune.webp?v=1') center / 100% 100% no-repeat;
}
.pf-jaune svg { width: 5.5vh; height: 5.5vh; }
.pf-jaune:active { transform: translateY(0.6vh); }
.pf-jaune:disabled { filter: grayscale(0.85) brightness(0.8); cursor: default; transform: none; }

.pf-bouton {
  padding: 1.4vh 2.4vw; border-radius: 99vh; cursor: pointer;
  font-family: var(--lettrage); font-weight: 400; font-size: max(3vh, 12px); line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(8, 30, 96, 0.9); color: #cfe3ff;
  border: 0.3vh solid rgba(110, 215, 255, 0.8);
}
.pf-bouton.danger { color: #ffc2c2; border-color: rgba(255, 120, 120, 0.8); }
.pf-bouton.danger.confirmer { background: #b3202a; color: #fff; }

/* ---- Le code de secours ---- */
.pk-ligne { margin: 0; font: 700 3vh/1 'Montserrat', var(--font); }
.pk-id { font-family: var(--lettrage); font-weight: 400; font-size: 5vh; color: #ffd34d; margin-left: 1vw; }
.pk-code {
  margin: 0; padding: 1.4vh 3vw;
  font-family: var(--lettrage); font-weight: 400; font-size: 6.4vh; line-height: 1;
  letter-spacing: 0.08em; color: #fff; user-select: all; -webkit-user-select: all;
  background: #061340; border: 0.4vh dashed #9fe0ff; border-radius: 1.8vh;
}
[data-vue="code"] .pf-bouton { position: absolute; left: 6vw; bottom: 10vh; }

/* ---- La page du profil ---- */
[data-vue="page"] { display: block; padding: 0; }
.pp-fiche {
  position: absolute; left: 3vw; top: 16vh; width: 28vw;
  display: flex; flex-direction: column; align-items: center; gap: 1.4vh;
}
.pp-visage {
  width: 34vh; height: 34vh; object-fit: cover; object-position: 50% 20%;
  border: 0.6vh solid #3b82e6; border-radius: 2.6vh;
  background: linear-gradient(160deg, #1d56c4, #0a1f5e);
}
.pp-id {
  margin: 0; text-align: center;
  font-family: var(--lettrage); font-weight: 400; font-size: 4.4vh; line-height: 1;
  text-shadow: 0 0.4vh 0 #0a1a4a;
}
.pp-drapeau svg { display: block; width: 7vh; height: 4.7vh; border-radius: 0.5vh; }

.pp-droite {
  position: absolute; left: 34vw; right: 3vw; top: 6vh; bottom: 25vh;
  display: flex; flex-direction: column; gap: 1.8vh; overflow-y: auto; scrollbar-width: none;
}
.pp-droite::-webkit-scrollbar { display: none; }
.pp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4vh 1.4vw; }
.pp-stat {
  padding: 1.3vh 1.6vw; border-radius: 1.8vh;
  background: rgba(3, 10, 34, 0.82); border: 0.3vh solid rgba(110, 215, 255, 0.35);
}
.pp-stat span {
  display: block; font: 800 max(2.2vh, 10px)/1.2 'Montserrat', var(--font);
  letter-spacing: 0.06em; text-transform: uppercase; color: #9fc3ff;
}
.pp-stat b {
  display: flex; align-items: center; gap: 1vw; margin-top: 0.6vh;
  font-family: var(--lettrage); font-weight: 400; font-size: 3.6vh; line-height: 1.1;
}
.pp-stat img { width: 5vh; height: 5vh; border-radius: 1vh; object-fit: cover; object-position: 50% 20%; }
.pp-note { grid-column: 1 / -1; margin: 0; font: 600 2vh/1.3 'Montserrat', var(--font); color: #ffd98a; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 1.2vh 1vw; }

/* ---- Le bouton de l'accueil : l'avatar du profil qui joue ---- */
.acc-profil .acc-avatar {
  width: max(4.4vh, 24px); height: max(4.4vh, 24px); border-radius: 50%;
  object-fit: cover; object-position: 50% 20%;
  border: 2px solid #3da5ff; background: #1552d6; box-sizing: border-box;
}

/* ---- Telephone debout : les cartes passent en grille ---- */
@media (max-aspect-ratio: 1/1) {
  .pf-titre { top: 7vh; font-size: 3.6vh; }
  .pf-retour { width: 6vh; height: 6vh; }
  .pf-tuiles { top: 15vh; left: 5vw; right: 5vw; height: auto; bottom: 16vh; flex-wrap: wrap; align-content: flex-start; overflow-y: auto; }
  .pf-carte { flex-basis: 41vw; height: 30vh; }
  .pf-carte b { font-size: 2.4vh; }
  .pf-champ { width: 86vw; font-size: 4vh; }
  .pf-bande { height: 30vh; }
  .pf-bande .pf-carte { flex-basis: 34vw; height: auto; }
  .pf-grille-drapeaux { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 13vw; }
  .pf-jaune { right: 50%; transform: translateX(50%); bottom: 3vh; width: 80vw; height: 10vh; }
  .pf-jaune:active { transform: translateX(50%) translateY(0.6vh); }
  .pf-erreur { max-width: 86vw; font-size: 2.2vh; }
  .pp-fiche { position: static; width: auto; margin: 13vh auto 0; }
  .pp-visage { width: 18vh; height: 18vh; }
  .pp-droite { position: static; margin: 2vh 5vw 16vh; }
  [data-vue="page"] { overflow-y: auto; }
  [data-vue="code"] .pf-bouton { position: static; }
}

/* ---- La phrase de presentation (19/09) ---- */
.pp-phrase {
  margin: 0; max-width: 28vw; text-align: center;
  font: 600 italic max(2.6vh, 11px)/1.3 'Montserrat', var(--font); color: #ffe38a;
}
.pp-phrase.vide { color: #9fc3ff; font-style: normal; }
.pp-phrase-edition { display: flex; flex-direction: column; align-items: center; gap: 1vh; }
.pp-phrase-champ { width: 28vw; margin: 0; font-size: 3.4vh; }