/* ---- Créer un match : une namecard par mode (style de l'accueil,
   commun/namecards.css), 3 par ligne ; détails du mode choisi dans un
   rectangle en dessous ---- */
/* Cartes et rectangle de détails : même largeur que l'accueil (.accueil,
   accueil.css), donc des namecards de même taille. */
.cartes-match,
.detail-match {
  max-width: 68.75rem;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.cartes-match {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.125rem;
}

/* Cartes en boutons : sans style de bouton. */
.carte-match {
  width: 100%;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.carte-match:disabled {
  cursor: wait;
}

/* Carte dont les détails sont affichés. */
.carte-match.selectionnee {
  border-color: var(--accent);
  box-shadow: 0 0 0.75rem rgba(245, 197, 66, 0.35);
}

.detail-match {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1.125rem;
}

.detail-match h2 {
  margin: 0;
}

.detail-match p,
.regles-classe {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.9375rem;
}

.regles-classe {
  padding-left: 1.25rem;
}

/* Classé : contour doré, comme ses matchs dans l'historique. */
.detail-classe {
  border-color: var(--accent-bordure);
}

.detail-classe a {
  color: var(--accent);
}

/* Ordi : grille de 6 colonnes, chaque carte en couvre 2 (3 par ligne) ;
   dernière ligne de 2 cartes centrée (la 1re des 2 commence à la 2e
   colonne). */
@media (min-width: 1001px) {
  .cartes-match {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .carte-match {
    grid-column: span 2;
  }

  .carte-match:nth-child(3n + 1):nth-last-child(2) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 1000px) {
  .cartes-match {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Entre-deux : 2 par ligne, carte seule sur la dernière ligne centrée. */
@media (min-width: 701px) and (max-width: 1000px) {
  .carte-match:nth-child(2n + 1):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.5625rem);
  }
}

@media (max-width: 700px) {
  /* Toutes les cartes de la même hauteur (comme l'accueil). */
  .cartes-match {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 0.75rem;
  }
}

.cache {
  display: none !important;
}

/* Modes de théâtre d'un mode de jeu : un bouton par mode. */
.modes-match {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.5rem;
}

.mode-match {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.5625rem;
  background-color: rgba(20, 20, 20, 0.55);
  color: white;
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
}

.mode-match span {
  font-size: 0.8125rem;
  font-weight: normal;
  color: var(--texte-doux);
}

.mode-match:hover {
  border-color: var(--accent-bordure);
  background-color: var(--accent-fond);
}

/* ---- Mode entraînement : configuration ---- */

.panneau-entrainement {
  gap: 1rem;
}

.panneau-entrainement h2,
.etape-entrainement h3 {
  margin: 0;
}

.etape-entrainement {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.case-entrainement {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ligne-entrainement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.ligne-entrainement select,
.selecteur-box select {
  margin-left: 0.375rem;
  padding: 0.25rem 0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  background-color: rgba(20, 20, 20, 0.6);
  color: white;
  font-family: inherit;
  font-size: 0.9375rem;
}

.selecteur-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.choix-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.choix-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.0625rem;
  padding: 0.375rem 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.5625rem;
  background-color: rgba(20, 20, 20, 0.55);
  color: white;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: bold;
  cursor: pointer;
}

.choix-btn span {
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--texte-doux);
}

.choix-btn:hover,
.choix-btn.active {
  border-color: var(--accent-bordure);
}

.choix-btn.active {
  background-color: var(--accent-fond);
}

/* Box personnalisée : persos de la full box du joueur, à cocher. */
.ent-persos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr));
  gap: 0.375rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.25rem;
}

.ent-perso {
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  opacity: 0.35;
  filter: grayscale(70%);
}

.ent-perso {
  position: relative;
}

.ent-perso img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Élément du Voyageur, en bas à gauche de la case. */
.ent-perso img.ent-element {
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: 40%;
  height: 40%;
  object-fit: contain;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
}

.ent-perso.coche {
  opacity: 1;
  filter: none;
  border-color: var(--accent);
}

.ent-compteur.insuffisant {
  color: #ff7a85;
}

/* Room privée : boss et J1, au-dessus des modes. */
.options-room {
  margin-bottom: 0.25rem;
  font-size: 0.9375rem;
}

/* Nom des modes de théâtre (Auto, Sardine, Carnage…) en police des titres
   ("Théâtre" : le "â" manque dans la police du texte) ; leur description
   et les choix de box (Ta box, Box adverse…) gardent la police du texte. */
.mode-match,
#ent-mode .choix-btn {
  font-family: var(--police-titre);
}

.mode-match span,
#ent-mode .choix-btn span {
  font-family: var(--police-texte);
}