/* CREATION ET JONCTION D'UNE AVENTURE — l'ecran d'inscription.
   Charge apres composants.css (cf. l'en-tete de base.css). */

/* ============================ aventures ============================
   Creation et jonction d'une aventure : mode, duree, code a quatre caracteres,
   couleur et motif de troupe. Tout se pose sur les .panel existants. */

/* Rappel de la duree et de la formation, sur les consignes et l'ecran du code. */
.brief-row { display: flex; gap: 10px; margin: 0 0 14px; }
/* Grille plutot que rangee : le pictogramme tient les deux lignes, la valeur se
   pose au-dessus de son libelle. En rangee simple, "En equipe" passait a la
   ligne et poussait le libelle hors du cadre. */
.brief-chip {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 9px; align-items: center;
  padding: 9px 12px; border-radius: 12px;
  background: rgba(238, 241, 230, 0.06);
  border: 1px solid rgba(238, 241, 230, 0.10);
}
.brief-chip .brief-ic { grid-row: 1 / span 2; }
.brief-chip .brief-ic svg { width: 19px; height: 19px; color: var(--moss); display: block; }
/* Pastille dessinee : plus large qu'un trait, elle porte son propre cadre. */
.brief-chip .brief-ic img { width: 30px; height: 30px; display: block; }
.brief-chip b { display: block; font-size: 0.82rem; font-weight: 800; color: var(--parchment); }
.brief-chip i {
  display: block; font-style: normal; font-size: 0.58rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--parch-faint);
}

/* Deux cartes de mode, exclusives : le choix se voit d'un coup d'oeil. */
/* Trois modes, mais DEUX natures : une sortie de groupe ou une personne seule.
   Le petit intertitre le dit en toutes lettres — sans lui, trois pavés se
   lisent comme trois variantes de la meme chose, alors que le premier change
   qui vient dans les bois. */
.mode-kind {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--parch-faint);
  margin: 0 0 6px; text-align: center;
}
.mode-kind + .mode-cards, .mode-kind + .mode-card { margin-bottom: 14px; }
.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
/* Le solo prend la ligne entiere : il vient AVANT et ne se compare pas aux
   deux autres, donc il se lit en rangee et non en colonne. */
.mode-card.wide {
  flex-direction: row; align-items: center; gap: 12px;
  padding: 12px 14px; text-align: left;
}
.mode-card.wide .mode-txt { flex: 1 1 auto; min-width: 0; }
.mode-card.wide b { display: block; }
.mode-card.wide i { display: block; }
/* L'indicateur du nombre : « 1 personne » ou « Plusieurs ». C'est la seule
   chose qui distingue vraiment les deux familles, elle doit se lire sans
   lire le reste. */
.mode-tag {
  display: inline-block; margin-top: 4px; padding: 2px 8px;
  border-radius: 999px; font-size: 0.55rem; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--parch-faint);
  background: rgba(238, 241, 230, 0.07);
  border: 1px solid rgba(238, 241, 230, 0.12);
}
.mode-card.wide .mode-tag { margin-top: 0; flex: none; }
.mode-card.sel .mode-tag {
  color: var(--moss); background: rgba(110, 200, 120, 0.16);
  border-color: rgba(110, 200, 120, 0.36);
}

/* ------------------------------------------------- les epreuves du defi

   Une rangee par epreuve, avec son etat a droite. Des cases a cocher auraient
   tenu moins de place, mais on choisit ici ce que la sortie va contenir : la
   pastille et la phrase disent ce que chacune EST, ce qu'une case ne fait
   pas. */
.trial-list { display: flex; flex-direction: column; gap: 7px; }
.trial {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: 12px; cursor: pointer; text-align: left;
  background: rgba(238, 241, 230, 0.05);
  border: 1px solid rgba(238, 241, 230, 0.12);
  color: var(--parch-dim);
  transition: border-color 0.16s, background 0.16s;
}
.trial .tr-ic img { display: block; width: 30px; height: 30px; filter: grayscale(0.8) brightness(0.75); }
.trial b { display: block; font-size: 0.78rem; font-weight: 800; color: var(--parch-dim); }
.trial i { display: block; font-style: normal; font-size: 0.6rem; color: var(--parch-faint); }
.trial .tr-state svg { width: 18px; height: 18px; color: var(--parch-faint); }
.trial.on {
  background: rgba(110, 200, 120, 0.12);
  border-color: rgba(110, 200, 120, 0.38);
}
.trial.on .tr-ic img { filter: none; }
.trial.on b { color: var(--parchment); }
.trial.on .tr-state svg { color: var(--moss); }
/* Fermee par une contrainte, pas par un choix : elle reste lisible et dit
   pourquoi, sinon le reglage passe pour une panne. */
.trial.off { opacity: 0.45; cursor: default; }

/* ------------------------------------------------- le choix du sentier

   La carte d'abord, la liste dessous : on choisit un chemin en regardant ou il
   passe, pas en lisant son nom. */
.route-map {
  height: 200px; border-radius: 14px; overflow: hidden; margin-bottom: 12px;
  background: linear-gradient(160deg, #24402c, #101d16);
  border: 1px solid rgba(238, 241, 230, 0.10);
}
.route-map canvas { display: block; width: 100%; height: 100%; }
.route-list { display: flex; flex-direction: column; gap: 8px; }
.route-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: 12px; cursor: pointer; text-align: left;
  background: rgba(238, 241, 230, 0.05);
  border: 1px solid rgba(238, 241, 230, 0.12);
  color: var(--parch-dim);
}
/* La lettre du parcours, dans sa couleur : c'est elle qu'on crie a travers une
   clairiere, et elle relie la ligne au trace de la carte juste au-dessus. */
.route-row .rr-letter {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  font-weight: 900; font-size: 0.9rem; color: #10201a;
  background: var(--rc, #7fb069);
}
.route-row b { display: block; font-size: 0.8rem; font-weight: 800; color: var(--parchment); }
.route-row i { display: block; font-style: normal; font-size: 0.6rem; color: var(--parch-faint); }
.route-row .rr-loot {
  flex: none; font-size: 0.58rem; font-weight: 700; color: var(--gold);
}
.route-row.sel {
  background: rgba(110, 200, 120, 0.14);
  border-color: rgba(110, 200, 120, 0.45);
  box-shadow: var(--glow-moss);
}
.mode-card {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 10px; border-radius: 14px; cursor: pointer; text-align: center;
  background: rgba(238, 241, 230, 0.05);
  border: 1px solid rgba(238, 241, 230, 0.12);
  color: var(--parch-dim);
  transition: transform 0.14s var(--ease), border-color 0.18s, background 0.18s;
}
.mode-card .mode-ic svg { width: 27px; height: 27px; color: var(--parch-faint); }
/* Pastille dessinee plutot que pictogramme trace : c'est le choix qui ouvre la
   partie, il merite la meme monnaie que les onglets de l'espace cartographe.
   Grisee tant que le mode n'est pas retenu — la couleur dit lequel est pris. */
.mode-card .mode-ic img {
  display: block; width: 46px; height: 46px;
  filter: grayscale(0.75) brightness(0.8);
  transition: filter 0.18s var(--ease), transform 0.14s var(--ease);
}
.mode-card b { font-size: 0.92rem; font-weight: 800; color: var(--parchment); }
.mode-card i { font-style: normal; font-size: 0.75rem; line-height: 1.35; color: var(--parch-dim); }
.mode-card.sel {
  background: rgba(110, 200, 120, 0.14);
  border-color: rgba(110, 200, 120, 0.45);
  box-shadow: var(--glow-moss);
}
.mode-card.sel .mode-ic svg { color: var(--moss); }
.mode-card.sel .mode-ic img { filter: none; transform: scale(1.06); }
.mode-card:active { transform: scale(0.97); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row .chip { cursor: pointer; }
.chip-row .chip.sel {
  background: rgba(110, 200, 120, 0.18);
  border-color: rgba(110, 200, 120, 0.45);
  color: var(--moss);
}

/* Le code, grave sur une planche : c'est ce que le fondateur va dicter. */
.code-plank {
  margin: 0 0 14px; padding: 16px 10px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, var(--wood-1), var(--wood-2));
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.code-plank span {
  font-size: 2.1rem; font-weight: 900; letter-spacing: 0.12em;
  color: var(--wood-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Saisie du code : une case par caractere, clavier adapte.

   Les cases sont PLUS HAUTES QUE LARGES, et c'est ce qui les rend lisibles :
   une case carree posee sur un champ de saisie ordinaire donnait un rectangle
   plat ou la lettre flottait, sans qu'on voie ou finissait l'une et ou
   commencait la suivante. Le rapport portrait (3 pour 4) est celui d'une touche
   de clavier, et le caractere occupe alors vraiment sa case.

   La taille du texte se cale sur la LARGEUR de la case (`em` sur une case
   dimensionnee en px) : sur une dalle etroite, six cases retrecissent, et une
   police figee en rem aurait fini par deborder. */
.otp { display: flex; align-items: center; justify-content: center; gap: 8px; }
.otp-dash { color: var(--parch-faint); font-weight: 800; font-size: 1.1rem; }
.otp-cell {
  width: 46px; height: 62px; padding: 0; text-align: center;
  border-radius: 12px; border: 1.5px solid rgba(238, 241, 230, 0.16);
  background: rgba(238, 241, 230, 0.06);
  color: var(--parchment);
  font-family: inherit; font-size: 1.7rem; font-weight: 900; line-height: 62px;
  letter-spacing: 0; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: border-color 0.16s, background 0.16s, transform 0.13s var(--ease);
  -webkit-appearance: none; appearance: none;
}
/* Une case remplie se distingue d'une case vide : sans cela on relit son code
   caractere par caractere pour savoir ou l'on en est. */
.otp-cell:not(:placeholder-shown) {
  border-color: rgba(226, 201, 141, 0.42);
  background: rgba(226, 201, 141, 0.10);
}
.otp-cell:focus {
  outline: none; border-color: var(--gold);
  background: rgba(226, 201, 141, 0.16);
  transform: translateY(-1px);
}

/* Six cases sur une dalle etroite : on retrecit la case, jamais la police —
   c'est le caractere qu'on vient verifier. */
@media (max-width: 359px) {
  .otp { gap: 6px; }
  .otp-cell { width: 40px; height: 55px; font-size: 1.45rem; line-height: 55px; }
}

/* Liste des troupes deja formees. */
.team-list { display: flex; flex-direction: column; gap: 8px; }
.team-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: 13px; cursor: pointer; text-align: left;
  background: rgba(238, 241, 230, 0.05);
  border: 1px solid rgba(238, 241, 230, 0.11);
  color: var(--parch-dim);
  transition: transform 0.13s var(--ease), border-color 0.18s;
}
.team-row:active { transform: scale(0.985); }
.team-row b { display: block; font-size: 0.78rem; font-weight: 800; color: var(--parchment); }
.team-row i { display: block; font-style: normal; font-size: 0.6rem; color: var(--parch-faint); }
.team-row .pill-arrow svg { width: 14px; height: 14px; opacity: 0.5; }
.crest { display: block; border-radius: 8px; flex: 0 0 auto; }

/* Ecusson a motif dessine : un aplat de la couleur de la troupe, et le motif
   pose dessus au masque. Une seule image blanche sert les vingt teintes. */
.crest-img { position: relative; display: block; flex: 0 0 auto; overflow: hidden; box-shadow: inset 0 0 0 1.4px rgba(0, 0, 0, 0.22); }
.crest-img i {
  position: absolute; inset: 12%;
  background: rgba(12, 18, 10, 0.72);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* Couleurs et motifs : la carte d'identite de la troupe. */
/* Trente-cinq motifs dessines au lieu de huit textures : empiles, ils
   poussaient le bouton "Continuer" hors de l'ecran d'un telephone. Ils se
   paginent donc comme les portraits (.pager), deux rangees a la fois. */
.color-picker, .pattern-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px; border-radius: 11px; cursor: pointer;
  background: rgba(238, 241, 230, 0.05);
  border: 1px solid rgba(238, 241, 230, 0.10);
}
.swatch > span { display: block; width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); }
.swatch i {
  font-style: normal; font-size: 0.52rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--parch-faint);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* En page, la case remplit sa colonne : le nom de la teinte se cale au centre
   quelle que soit sa longueur. */
.pager-page .swatch { width: 100%; min-width: 0; justify-content: center; }
.swatch.sel { border-color: rgba(110, 200, 120, 0.55); box-shadow: var(--glow-moss); }
.swatch.sel i { color: var(--moss); }
.swatch.taken { opacity: 0.34; cursor: not-allowed; }
.swatch.taken > span { filter: grayscale(0.6); }