/* avatarPicker.css — fenêtre « Choisissez votre portrait » (avatarPicker.js).
   Partagée par la page d'inscription et par le jeu : chemins absolus, aucune
   dépendance aux feuilles de style de l'une ou de l'autre. */

.avp-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(10, 6, 2, 0.72);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Planche de bois : son cadre ferré occupe environ 2,5 % de chaque bord. */
.avp-board {
  position: relative;
  box-sizing: border-box;
  width: min(820px, 96vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4.2% 5.5% 3.5%;
  background: url('/img/tableau_bois.webp') no-repeat center / 100% 100%;
  color: #f2e4c4;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.6));
}

.avp-title {
  margin: 0;
  text-align: center;
  font-family: 'MedievalSharp', 'Cinzel', Georgia, serif;
  font-size: 26px;
  font-weight: normal;
  letter-spacing: 0.02em;
  color: #f5d98b;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);
}

.avp-subtitle {
  margin: 0 auto;
  max-width: 60ch;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: #e6d6b3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Prix d'un changement de portrait (joueur qui en a déjà un). */
.avp-notice {
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #f5d98b;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.avp-body {
  display: flex;
  gap: 16px;
  min-height: 0;
  flex: 1 1 auto;
}

/* Grand aperçu sur parchemin : le portrait au fond transparent y apparaît
   comme dans la fiche « Info joueur ». */
.avp-preview {
  flex: 0 0 38%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 3 / 4;
  align-self: flex-start;
  border: 3px solid #4b3620;
  border-radius: 6px;
  background: url('/img/UI/win_mainoverlay_paper.jpg') center / cover;
  box-shadow: inset 0 0 18px rgba(75, 54, 32, 0.45), 0 4px 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.avp-preview img {
  display: block;
  max-width: 96%;
  max-height: 96%;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(#000 85%, transparent);
  mask-image: linear-gradient(#000 85%, transparent);
}

.avp-preview-empty {
  align-self: center;
  padding: 0 12px;
  text-align: center;
  font-size: 14px;
  color: #6b5236;
}

/* Colonne de droite : filtres puis grille. */
.avp-list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Filtres « Hommes » / « Femmes » : un clic filtre, un second l'annule. */
.avp-filters {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.avp-filter {
  flex: 0 1 140px;
  min-width: 0;
  padding: 5px 12px 4px;
  border: 2px solid #6b5236;
  border-radius: 6px;
  background: linear-gradient(180deg, #6b5236 0%, #533e27 100%);
  color: #e7dab7;
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 0 #a89e6f inset, 0 2px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.avp-filter:hover {
  border-color: #c9a24a;
  color: #fffbe0;
}

.avp-filter[aria-pressed="true"] {
  border-color: #f5d98b;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #fffbe0;
  box-shadow: 0 0 0 1px #f5d98b, 0 0 10px rgba(245, 217, 139, 0.45);
}

.avp-filter:focus-visible {
  outline: 2px solid #f5d98b;
  outline-offset: 2px;
}

/* `contain: paint` : les vignettes masquées par le défilement ne doivent
   plus recevoir les clics. Sans cela, sur téléphone, les portraits cachés
   sous la grille interceptaient les touches destinées aux boutons
   « Annuler » / « Valider », qui ne répondaient qu'à certains endroits. */
.avp-grid {
  position: relative;
  contain: paint;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  align-content: start;
  gap: 10px;
  max-height: min(56vh, 460px);
  overflow-y: auto;
  padding: 4px;
}

.avp-thumb {
  position: relative;
  /* Hauteur réservée par le rembourrage (4:3 de la largeur) plutôt que par
     aspect-ratio, que la grille défilante ne respecte pas toujours. */
  height: 0;
  padding: 0 0 133.33%;
  border: 2px solid #4b3620;
  border-radius: 5px;
  background: url('/img/UI/win_mainoverlay_paper.jpg') center / cover;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.avp-thumb[hidden] {
  display: none;
}

.avp-thumb img {
  position: absolute;
  inset: 4% 4% 0;
  width: 92%;
  height: 96%;
  object-fit: contain;
  object-position: bottom;
}

.avp-thumb:hover {
  transform: translateY(-2px);
  border-color: #c9a24a;
}

.avp-thumb.is-selected {
  border-color: #f5d98b;
  box-shadow: 0 0 0 2px #f5d98b, 0 0 14px rgba(245, 217, 139, 0.55);
}

.avp-thumb:focus-visible,
.avp-btn:focus-visible {
  outline: 2px solid #f5d98b;
  outline-offset: 2px;
}

.avp-error {
  min-height: 1.2em;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: #ff9c8a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.avp-actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 14px;
}

/* Boutons verts du jeu (même rendu que .btn-green-small / .tab-btn). */
.avp-btn {
  min-width: 170px;
  padding: 9px 22px 8px;
  border: 2px solid #4f7219;
  border-radius: 6px;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  font: inherit;
  font-size: 16px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  cursor: pointer;
}

.avp-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

.avp-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.avp-btn-secondary {
  border-color: #6b5236;
  background: linear-gradient(180deg, #6b5236 0%, #533e27 100%);
}

/* Petits écrans : aperçu au-dessus de la grille. */
@media (max-width: 640px), (max-height: 520px) and (orientation: landscape) {
  .avp-board {
    padding: 7% 6% 5%;
  }
  .avp-title {
    font-size: 21px;
  }
  .avp-body {
    flex-direction: column;
    align-items: stretch;
  }
  .avp-preview {
    flex: none;
    width: 36%;
    align-self: center;
  }
  .avp-list {
    gap: 6px;
  }
  .avp-filter {
    padding: 4px 8px 3px;
    font-size: 13px;
  }
  .avp-grid {
    max-height: 30vh;
  }
}

/* Téléphone en paysage : peu de hauteur, on supprime le sous-titre et on
   cale l'aperçu sur la hauteur disponible. */
@media (max-height: 520px) and (orientation: landscape) {
  .avp-board {
    gap: 6px;
    padding: 3.5% 5% 2.5%;
  }
  .avp-subtitle {
    display: none;
  }
  .avp-body {
    flex-direction: row;
  }
  .avp-preview {
    flex: none;
    width: auto;
    height: min(52vh, 240px);
    align-self: flex-start;
  }
  .avp-grid {
    max-height: calc(52vh - 34px);
  }
}

/* Ascenseur vert, identique à celui du jeu (.lou-scroll de style.css). Copié
   ici parce que la page d'inscription ne charge pas style.css. */
/* Firefox seulement : dans Chrome, scrollbar-color désactiverait le style
   détaillé ci-dessous. */
@supports (-moz-appearance: none) {
  .avp-grid {
    scrollbar-color: #5d9130 #a0907a;
  }
}

.avp-grid::-webkit-scrollbar {
  width: 22px;
  background: transparent;
}

.avp-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #7da55c, #45721c);
  border-radius: 8px;
  border: 2px solid #765b49;
}

.avp-grid::-webkit-scrollbar-track {
  background: #a0907a;
  border-radius: 10px;
}

.avp-grid::-webkit-scrollbar-button:single-button {
  display: block;
  height: 18px;
  background: linear-gradient(to bottom, #90c06e, #45721c);
  border-radius: 6px;
  border: 2px solid #e0d3b8;
  background-position: center;
  background-repeat: no-repeat;
}

.avp-grid::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg width='12' height='8' xmlns='http://www.w3.org/2000/svg'><polygon points='6,2 2,6 10,6' fill='%233e680c'/></svg>");
  background-size: 12px 8px;
}

.avp-grid::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg width='12' height='8' xmlns='http://www.w3.org/2000/svg'><polygon points='2,2 10,2 6,6' fill='%233e680c'/></svg>");
  background-size: 12px 8px;
}