/* LE NOUVEAU LIEU ET LA FEUILLE « NOUVEAU PARCOURS » (js/carto/91-neuf.js).

   Ce qui reste de la coque du mode guide, parti en 2.106 : l'ecran plein
   (`.cg.page`) ou l'on cherche un endroit puis le regarde avant de le poser,
   et les grands choix (`.cg-choix`) que la feuille « Nouveau parcours »
   emploie pour le lieu et le jeu.

   Rien de brun ne se reecrit ici : le bois vit dans `--bois-1/2/3` de
   base.css, et chaque theme le repeint (docs/themes.md). */

.cg{
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  /* La coque entiere laisse passer : ce sont ses BLOCS qui prennent le doigt. */
  pointer-events: none;
}
.cg > *{ pointer-events: auto; }

/* La planche de bois. Le meme bois que partout : `--bois-grad`, jamais un
   brun ecrit a la main. */
.cg.page{ background: var(--bois-grad); }

/* ------------------------------------------------------------- l'entete */

.cg-top{
  display: flex; align-items: center; gap: 8px;
  padding: calc(var(--safe-top) + 8px) 12px 6px;
  background: linear-gradient(180deg, rgba(18, 12, 6, 0.92), rgba(18, 12, 6, 0));
}
.cg-top .round-btn{ width: 40px; height: 40px; flex: none; }
.cg-top .round-btn svg{ width: 18px; height: 18px; }
/* La croix qui quitte, elle, suit la regle de toutes les croix (base.css). */
.cg-top .round-btn[data-act="carto-neuf-quit"]{ width: 52px; height: 52px; }
.cg-top .round-btn[data-act="carto-neuf-quit"] svg{ width: 23px; height: 23px; }
.cg-brand{ flex: 1; min-width: 0; line-height: 1.1; }
.cg-brand b{
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 0.86rem; color: var(--parchment);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.cg-brand i{
  display: block; font-style: normal; font-size: 0.58rem;
  color: var(--parch-faint); letter-spacing: 0.06em;
}

/* --------------------------------------------------------------- le corps */

/* `safe center` : la question se pose au milieu de l'ecran quand elle y
   tient. Le mot-cle `safe` evite le piege connu du centrage : sur un contenu
   plus haut que la boite, un centrage ordinaire coupe le HAUT et le rend
   inatteignable au defilement. */
.cg-main{ flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cg.page .cg-main{
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 8px;
  justify-content: safe center;
}

.cg-titre{
  margin: 4px 0; text-align: center;
  font-family: var(--display); font-size: 1.42rem; font-weight: 900; line-height: 1.15;
  color: var(--gold); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.cg-sous{
  margin: 0 0 14px; text-align: center;
  font-size: 0.84rem; line-height: 1.4; color: var(--parch-dim);
}
.cg-texte{
  margin: 0 0 14px; text-align: center;
  font-size: 0.78rem; line-height: 1.5; color: var(--parchment);
}
.cg .field span{ font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold); font-weight: 800; }

/* ------------------------------------------------------- les grands choix

   Une carte par reponse, assez haute pour se viser sans regarder, avec sa
   phrase. Le radio est cache : c'est la CARTE qu'on touche. Sert aussi dans
   la feuille « Nouveau parcours », hors de la coque. */
.cg-choix{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cg-choix label{
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 12px; border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(238, 241, 230, 0.12);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.cg-choix label.on{
  background: rgba(47, 122, 66, 0.30);
  border-color: var(--moss);
}
.cg-choix input{ position: absolute; opacity: 0; pointer-events: none; }
.cg-choix img{ flex: none; width: 54px; height: 54px; object-fit: contain; }
.cg-choix b{ display: block; font-size: 0.82rem; color: var(--parchment); }
.cg-choix i{
  display: block; font-style: normal; font-size: 0.64rem; line-height: 1.35;
  color: var(--parch-dim); margin-top: 2px;
}
.cg-choix span.cg-choix-txt{ flex: 1; min-width: 0; }
/* La pastille de droite : le seul signe qui dit « un seul de ces choix ». */
.cg-choix u{
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(238, 241, 230, 0.34); text-decoration: none;
}
.cg-choix label.on u{ border-color: var(--moss); background: radial-gradient(circle, var(--moss) 0 5px, transparent 6px); }

/* --------------------------------------------------------------- le pied

   Retour a gauche, action a droite, toujours au meme endroit. */
.cg-foot{
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px calc(10px + var(--safe-bot) + var(--gesture-gap));
  background: linear-gradient(0deg, rgba(18, 12, 6, 0.94) 60%, rgba(18, 12, 6, 0));
}
.cg-foot .btn{ margin: 0; }
.cg-foot .grow{ flex: 1; }

/* -------------------------------------------------- le nouveau lieu

   « CREER UN NOUVEAU LIEU » EST UN BOUTON, EN TETE DE LA LISTE (2.68.2) :
   avec douze lieux, un lien sous la liste tombait sous le pli. Il garde le
   BOIS et non le vert — le vert est celui de l'action de la page. */
.neuf-neuf{ margin-bottom: 12px; }

/* L'APERCU AVANT DE POSER : la carte du jeu, le contour, et le point cherche.
   Une toile et non un SVG — il faut poser des images derriere des traits. Le
   canevas est dessine en 720 x 480, l'ecran en fait ce qu'il veut. */
.neuf-apercu{
  margin: 0 0 12px; border-radius: 14px; overflow: hidden;
  border: 3px solid var(--wood-1); background: rgba(12, 8, 4, 0.5);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.neuf-apercu canvas{ display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------ l'ecran large

   Sur un ordinateur, la planche ne s'etire pas : elle se pose au milieu, a la
   largeur d'un telephone. */
@media (min-width: 760px) {
  .cg.page .cg-main, .cg-foot, .cg-top{ max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }
}

/* ------------------------------------------- ce que le nouveau lieu replie

   L'ecran plein couvre le terrain le temps qu'on reponde : l'entete, les
   portes, les onglets d'etape, le rail et le bloc de l'element choisi ne
   doivent pas transparaitre dessous. */
#screen-carto.neuf .carto-head,
#screen-carto.neuf .carto-etapes,
#screen-carto.neuf .carto-rail,
#screen-carto.neuf .carto-tools,
#screen-carto.neuf .carto-step,
#screen-carto.neuf #carto-node,
#screen-carto.neuf .carto-tiles,
#screen-carto.neuf .carto-arm,
#screen-carto.neuf .carto-float{ display: none !important; }