/* Réutilise la palette de css/styles.css (violet électrique #6D28D9) */

.content-characters{
  gap: 16px;
}

/* Panneaux de la popup */
.spriteCard, .facesCard, .char-desc, .char-stats, .char-attacks{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
}
.spriteCard h4, .facesCard h4, .char-desc h4, .char-stats h4, .char-attacks h4{
  color: var(--accent);
  margin: 0 0 8px 0;
}

/* Sprite box (petit sprite map) */
.spriteBox{
  background: #171024;
  border: 1px dashed var(--border);
  border-radius: 12px;
  width: 100%;
  min-height: 180px; /* hauteur mini pour pas que ce soit trop petit */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.spriteBox img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated; /* si sprite rétro */
}


/* Faces pleine largeur de la modale */
.faces-wide{
  grid-column: 1 / -1; /* occupe toute la largeur (2 colonnes) */
}
.facesCard{ margin-bottom: 4px; }

/* Galerie de visages — plus grand, carré, fluide */
.facesGrid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}
@media (min-width: 1100px){
  .facesGrid{
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }
}
.facesGrid .face{
  background: #171024;
  border: 1px solid var(--border);
  border-radius: 12px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.facesGrid .face img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tableaux (stats & attaques) */
.charTable{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.charTable th, .charTable td{
  padding:6px; text-align:center; vertical-align:middle;
  border-bottom:1px solid var(--border);
}
.charTable th{
  background: var(--accent2); color:#fff; font-weight:bold;
}
.charTable tr:last-child td{ border-bottom:none; }

/* Responsive popup */
@media (max-width: 900px){
  .content-characters{ grid-template-columns:1fr; }
  .char-left{ order: -1; } /* sprite au-dessus */
  .faces-wide{ grid-column: 1 / -1; } /* pleine largeur (col unique aussi) */
}

/* Stats mobile : éviter le scroll horizontal (même pattern que bestiaire) */
@media (max-width: 768px){
  #statsTable thead{ display:none; }
  #statsTable, #statsTable tbody, #statsTable tr, #statsTable td{
    display:block; width:100%;
  }
  #statsTable td{
    display:flex; justify-content:space-between;
    border-bottom:1px solid var(--border);
    padding:8px; background:var(--panel);
  }
  #statsTable td::before{
    content:attr(data-label);
    background:var(--accent2); color:#fff;
    padding:4px 8px; border-radius:6px;
    margin-right:8px; font-weight:bold;
  }
}




/* === Correction du débordement de la popup sous la navbar === */

/* Le fond sombre (modal) occupe tout l'écran, mais permet le scroll interne */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: flex-start; /* aligne le contenu en haut, pas centré verticalement */
  overflow-y: auto; /* permet le défilement si trop grand */
  z-index: 1000; /* au-dessus de la navbar */
  padding-top: 80px; /* espace sous la navbar */
  padding-bottom: 40px; /* petit fond en bas aussi */
}

/* Quand active */
.modal[aria-hidden="false"] {
  display: flex;
}

/* La "sheet" reste centrée horizontalement et responsive */
.sheet {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 1000px;
  width: 95%;
  margin: auto;
  color: var(--text);
  padding: 16px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

/* Sur mobile : marges plus petites */
@media (max-width: 768px) {
  .modal {
    padding-top: 70px;
    padding-bottom: 20px;
  }

  .sheet {
    width: 94%;
    border-radius: 12px;
    padding: 12px;
  }
}


.sheethead{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:#171024; border-bottom:1px solid var(--border);
border-radius: 18px !important;
}