/*
 * Item mystère (jeux.php?jeu=item_mystere) : les indices, le champ de proposition et sa liste, les essais, la fin de
 * partie. Version du lien : MYSTERE_V (static/php/item_mystere_fonctions.php), à changer à chaque modification. Le
 * catalogue et les statistiques (classes mdj_) sont dans static/css/mot_du_jour.css, chargée elle aussi par la page.
 *
 * Le script static/js/item_mystere.js construit le jeu et pose les états : data-etat (bien, proche, loin ; plus, moins
 * pour le numéro) sur une case d'un essai, data-commun (1, 0) sur une matière, data-type (connaissance, situation,
 * initiales) sur un indice, data-partie (en_cours, gagne, perdu) sur le jeu. Les couleurs sont celles du mot du jour.
 */

.mystere,
.mystere_legende {
  --mystere-vert: #17a35c;          /* identique : le vert du mot du jour */
  --mystere-jaune: #f8c630;         /* en partie : le jaune du mot du jour */
  --mystere-encre-jaune: #0b1727;
  --mystere-bleu: #2c7be5;
}

.mystere {
  max-width: 44rem;
  margin: 0 auto;
  container-type: inline-size;
}


/* --- Indices ------------------------------------------------------------------------------------------------------- */

.mystere_indices {
  padding: 1rem;
  border: 1px solid var(--falcon-border-color);
  border-radius: .75rem;
  background-color: var(--falcon-gray-100);
}

.mystere_bloc_tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}

.mystere_bloc_titre {
  margin: 0;
  color: var(--falcon-gray-900);
  font-size: 1rem;
  font-weight: 700;
}

.mystere_bloc_compte {
  color: var(--falcon-gray-600);
  font-size: .8rem;
  font-weight: 600;
}

.mystere_indices_liste {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mystere_indice {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .6rem .8rem;
  border-left: .25rem solid var(--mystere-bleu);
  border-radius: .5rem;
  background-color: var(--falcon-card-bg, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.mystere_indice[data-type="situation"] {
  border-left-color: var(--mystere-vert);
}

.mystere_indice[data-type="initiales"] {
  border-left-color: var(--mystere-jaune);
}

.mystere_indice.est_verrouille {
  border: 1px dashed var(--falcon-gray-400);
  background-color: transparent;
  box-shadow: none;
  color: var(--falcon-gray-600);
  font-size: .8rem;
}

.mystere_indice_nom {
  display: block;
  color: var(--falcon-gray-700);
  font-size: .75rem;
  font-weight: 600;
}

.mystere_indice_texte {
  color: var(--falcon-gray-1000);
  font-size: .95rem;
  line-height: 1.45;
}

.mystere_indice[data-type="initiales"] .mystere_indice_texte {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Rang de la connaissance : A, un rond noir ; B, un carré bleu (comme les pastilles des QCM) */
.mystere_rang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: .35rem;
  vertical-align: .05em;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
}

.mystere_rang[data-rang="B"] {
  border-radius: .3rem;
  background-color: var(--mystere-bleu);
}

/* Un mot du titre de l'item, masqué */
.mystere_masque {
  display: inline-block;
  min-width: 2.2em;
  margin: 0 .1em;
  padding: 0 .3em;
  border-radius: .3rem;
  background-color: var(--falcon-gray-300);
  color: var(--falcon-gray-600);
  font-size: .85em;
  line-height: 1.4;
  text-align: center;
  vertical-align: baseline;
}


/* --- Le champ de proposition et sa liste ---------------------------------------------------------------------------- */

.mystere_saisie {
  margin-top: 1rem;
}

.mystere_saisie[hidden] {
  display: none;
}

.mystere_etiquette {
  display: block;
  margin-bottom: .35rem;
  color: var(--falcon-gray-900);
  font-size: .85rem;
  font-weight: 600;
}

.mystere_boite {
  position: relative;
}

/* 16 px au moins : un téléphone ne zoome pas sur le champ */
.mystere .mystere_champ {
  min-height: 3rem;
  font-size: 1rem;
}

.mystere.est_occupe .mystere_champ {
  cursor: progress;
}

.mystere_liste {
  position: absolute;
  z-index: 20;
  top: calc(100% + .25rem);
  right: 0;
  left: 0;
  max-height: 18rem;
  margin: 0;
  padding: .25rem;
  overflow-y: auto;
  border: 1px solid var(--falcon-border-color);
  border-radius: .5rem;
  background-color: var(--falcon-card-bg, #fff);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
  list-style: none;
}

.mystere_liste[hidden] {
  display: none;
}

.mystere_option {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .4rem .6rem;
  border-radius: .35rem;
  color: var(--falcon-gray-900);
  cursor: pointer;
}

.mystere_option.est_actif {
  background-color: var(--falcon-gray-200);
}

.mystere_option.est_deja,
.mystere_option.est_vide {
  color: var(--falcon-gray-500);
  cursor: default;
}

.mystere_option_titre {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .9rem;
  line-height: 1.3;
}

.mystere_option_deja {
  flex: 0 0 auto;
  font-size: .7rem;
  font-style: italic;
}

.mystere_compte {
  margin-top: .4rem;
  color: var(--falcon-gray-600);
  font-size: .8rem;
  font-weight: 600;
  text-align: right;
}

/* Le numéro d'un item, sur une pastille (liste, essai, fin de partie) */
.mystere_numero {
  flex: 0 0 auto;
  min-width: 2.4rem;
  padding: .15rem .4rem;
  border-radius: .35rem;
  background-color: var(--mystere-bleu);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.mystere_option.est_deja .mystere_numero {
  background-color: var(--falcon-gray-400);
}


/* --- Message et fin de partie ----------------------------------------------------------------------------------------- */

.mystere_bilan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  margin-top: .75rem;
  text-align: center;
}

.mystere_message {
  color: var(--falcon-gray-1100);
  font-weight: 600;
}

.mystere_message:empty {
  display: none;
}

.mystere_suite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

.mystere_suite[hidden] {
  display: none;
}

.mystere_item {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  color: var(--falcon-gray-1000);
  font-weight: 600;
  text-align: left;
}

.mystere_item:empty {
  display: none;
}

.mystere_partage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.mystere_reviser[hidden] {
  display: none;
}

.mystere_copie,
.mystere_demain {
  color: var(--falcon-gray-600);
}


/* --- Les essais : une carte par item proposé, le dernier en haut ----------------------------------------------------- */

.mystere_essais {
  display: grid;
  gap: .6rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.mystere_essais:empty {
  margin: 0;
}

.mystere_essai {
  padding: .7rem;
  border: 1px solid var(--falcon-border-color);
  border-radius: .75rem;
  background-color: var(--falcon-card-bg, #fff);
}

.mystere_essai[data-trouve="1"] {
  border-color: var(--mystere-vert);
  box-shadow: 0 0 0 1px var(--mystere-vert);
}

.mystere_essai_tete {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .55rem;
}

.mystere_titre {
  min-width: 0;
  color: var(--falcon-gray-1000);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.35;
}

.mystere_cases {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem 9.5rem;
  gap: .35rem;
}

/* Une case : son nom en petit, sa valeur ; la couleur dit ce que l'essai apprend */
.mystere_case {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .2rem;
  min-height: 3.25rem;
  padding: .4rem .55rem;
  border-radius: .5rem;
  background-color: var(--falcon-gray-200);
  color: var(--falcon-gray-900);
}

.mystere_case[data-etat="bien"] {
  background-color: var(--mystere-vert);
  color: #fff;
}

.mystere_case[data-etat="proche"] {
  background-color: var(--mystere-jaune);
  color: var(--mystere-encre-jaune);
}

.mystere_case_nom {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .8;
  text-transform: uppercase;
}

.mystere_case_valeur {
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.25;
}

.mystere_case[data-case="numero"] .mystere_case_valeur {
  font-size: .95rem;
  white-space: nowrap;
}

.mystere_matieres {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.mystere_matiere {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1rem .45rem;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, .7);
  color: var(--mystere-encre-jaune);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.35;
}

.mystere_matiere[data-commun="1"] {
  background-color: var(--mystere-vert);
  color: #fff;
}

.mystere_case[data-etat="bien"] .mystere_matiere {
  background-color: rgba(255, 255, 255, .22);
  color: #fff;
}

.mystere_matiere_icone {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}

/* Sur un écran étroit : les matières sur toute la largeur, le numéro et les situations dessous */
@container (max-width: 30rem) {
  .mystere_cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mystere_case[data-case="matieres"] {
    grid-column: 1 / -1;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 575.98px) {
    .mystere_cases {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mystere_case[data-case="matieres"] {
      grid-column: 1 / -1;
    }
  }
}


/* --- Animations ----------------------------------------------------------------------------------------------------- */

@keyframes mystere_arrivee {
  from {
    opacity: 0;
    transform: translateY(-.5rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mystere_salut {

  0%,
  100% {
    transform: none;
  }

  40% {
    transform: scale(1.03);
  }
}

.mystere_nouveau {
  animation: mystere_arrivee .35s ease-out;
}

.mystere_trouve .mystere_essai[data-trouve="1"] {
  animation: mystere_salut .6s ease-in-out .35s both;
}

@media (prefers-reduced-motion: reduce) {

  .mystere_nouveau,
  .mystere_trouve .mystere_essai[data-trouve="1"] {
    animation: none;
  }
}


/* --- Légende, sous le jeu --------------------------------------------------------------------------------------------- */

.mystere_pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 .3rem;
  border-radius: .35rem;
  background-color: var(--falcon-gray-200);
  color: var(--falcon-gray-900);
  font-size: .8rem;
  font-weight: 700;
}

.mystere_pastille[data-etat="bien"] {
  background-color: var(--mystere-vert);
  color: #fff;
}

.mystere_pastille[data-etat="proche"] {
  background-color: var(--mystere-jaune);
  color: var(--mystere-encre-jaune);
}