/* jeux.css — commun aux 8 jeux (architecture scène, couche B) : entrée à 3 niveaux, cadre de la scène,
 * panneau de jeu (non modal). Rien ici ne parle d'arche. Jetons : css/app-core.css. */

/* Le texte du livre : Literata italique, net, jamais décoré (décision 7). */
.livre{font-family:var(--f-livre);font-style:italic;font-weight:400}

/* ---------- Panneau de jeu (ouvrirPanneau, modal:false) ---------- */
/* La scène s'arrête au-dessus du panneau : c'est le resserrement. Menu et barre d'actions s'effacent dessous. */
body.panneau-libre #ecrans{bottom:calc(var(--h-panneau, 0px) + 10px + env(safe-area-inset-bottom))}
body.panneau-libre .menu-w,body.panneau-libre .actions,body.panneau-libre .scotch.g,body.panneau-libre .scotch.d{opacity:0;visibility:hidden}
/* Plus compact que la carte du hameau : la scène doit garder sa place au-dessus (Mesure clé de 388 caractères). */
.panneau.libre{left:8px;right:8px;bottom:calc(env(safe-area-inset-bottom) + 10px);max-height:min(calc(100% - var(--h-entete, 78px) - 150px), var(--panneau-max, 100%));
  transition-duration:var(--t-court)}                               /* planche 13 E, ligne 5 (la courbe Houle vient de coquille.css) */
/* Panneau plafonné (mécanisme commun, 14/11) : le jeu dit la place qu'il garde au-dessus (ctx.placeVoulue → --panneau-max) ;
 * la Mesure clé défile au doigt. Coupée : un dégradé et « suite ↓ » en bas, jusqu'au bout du défilement. Rien ne bouge tout seul. */
.panneau.libre.a-suite::after{content:attr(data-suite);position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 18px 6px;
  text-align:right;font:700 .75rem/1 var(--f-texte);color:var(--texte-2);pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--feuille) 60%)}
.reduit .panneau.libre{transition-duration:200ms}                  /* version réduite : fondu 200 ms */
.panneau.libre .carte-tete{padding:0 0 0 14px}
/* Pas de scotch sur le panneau de jeu (13/11, Émilie) : il débordait sur la file et prenait de la hauteur. La carte du hameau garde le sien. */
.panneau.libre .scotch-panneau{display:none}
.panneau.libre .panneau-fermer{width:44px;height:44px}
.carte-jeu{padding:8px 16px 12px}
.carte-jeu .carte-cit{margin:0}
.carte-jeu .carte-cit p{font-size:.96875rem;line-height:1.4}

/* ---------- L'écran d'un jeu ---------- */
.ecran.en-jeu{height:100%;min-height:0;padding:var(--e3) var(--e4) var(--e2)}
.jeu-hote{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.jeu-scene{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}
/* Ligne d'interface (refus, aide) : posée sur la scène, sans la déplacer. Jamais en rouge. */
.ligne-jeu{position:absolute;left:0;right:0;top:0;z-index:5;margin:0 auto;width:max-content;max-width:100%;padding:6px 12px;
  background:var(--papier);border:1.5px solid var(--noir);font-weight:700;font-size:.875rem;line-height:1.3;text-align:center;
  pointer-events:none;opacity:0;transition:opacity var(--t-court) var(--c-sortie)}
.ligne-jeu.vue{opacity:1;transition-timing-function:var(--c-encre)}

/* ---------- É0 · L'entrée : le panneau du jeu et trois étiquettes de bagage ---------- */
.jeu-entree{margin:auto 0;padding:var(--e5) var(--e4) var(--e4);background:var(--feuille);border:1.5px solid var(--noir);
  box-shadow:4px 4px 0 var(--partie);text-align:center}
.jeu-lieu{margin:0;font-size:.75rem;color:var(--texte-3)}
.jeu-titre{margin:4px 0 var(--e4);font:800 1.75rem/1 var(--f-titre);font-stretch:75%;text-transform:uppercase;
  text-shadow:2px 1.5px 0 var(--partie);overflow-wrap:anywhere}
.jeu-but{margin:calc(-1 * var(--e2)) auto var(--e4);max-width:30ch;font-size:.9375rem;line-height:1.4;color:var(--texte-2)}
/* Consigne de départ dans la partie : sur la scène, au-dessus de la file ; s'efface pendant un choix et après le premier passage. */
.guide-jeu{margin:6px 0 2px;min-height:1.3em;text-align:center;font-weight:700;font-size:.875rem;line-height:1.3;
  transition:opacity var(--t-court) var(--c-sortie)}
.en-choix .guide-jeu,.guide-jeu.fini{opacity:0}
.jeu-niveaux{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--e3);align-items:center}
.jeu-niveau{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:56px;width:min(240px,100%);
  padding:8px 16px 8px 40px;border:1.5px solid var(--noir);border-radius:4px 14px 14px 4px;background:var(--papier);
  color:var(--noir);font:800 1.125rem/1.1 var(--f-titre);font-stretch:75%;text-decoration:none;text-align:left}
.jeu-niveau::before{content:"";position:absolute;left:14px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  border:1.5px solid var(--noir);background:var(--feuille)}                      /* l'œillet de l'étiquette */
.jeu-niveaux li:nth-child(1) .jeu-niveau{transform:rotate(-1.2deg)}
.jeu-niveaux li:nth-child(2) .jeu-niveau{transform:rotate(.8deg)}
.jeu-niveaux li:nth-child(3) .jeu-niveau{transform:rotate(-.5deg)}
.jeu-niveau[href]{box-shadow:2px 2px 0 var(--partie)}
.jeu-niveau:focus-visible{outline:3px solid var(--tournesol);outline-offset:2px}
.jeu-niveau[aria-disabled]{border-style:dashed;color:var(--texte-3);background:transparent;cursor:default}
.jeu-manque{display:block;margin-top:2px;font:400 .75rem var(--f-texte);font-stretch:100%;color:var(--texte-2)}

/* ---------- É4 · Fin de partie : la page « PLAN DE L'ÎLE n » (planche 13 F ; tableau E, lignes 15 à 18) ---------- */
/* La page monte vide (--t-moyen, Houle) ; le texte apparaît une fois posée. Réduit : fondu 300 ms. */
.page-fin{position:absolute;inset:0;z-index:7;overflow-y:auto;overscroll-behavior:contain;background:var(--feuille);
  border-top:1.5px solid var(--noir);padding:var(--e5) var(--e4) var(--e4);
  transform:translateY(100%);transition:transform var(--t-moyen) var(--c-houle)}
.page-fin.ouvert{transform:none}
.page-fin.vide > *{visibility:hidden}                                /* « Rentrer » : le support bouge vide */
.reduit .page-fin{transform:none;opacity:0;transition:opacity 300ms linear}
.reduit .page-fin.ouvert{opacity:1}
.pf-tete h2{margin:0 0 var(--e4);font:800 1.5625rem/1 var(--f-titre);font-stretch:75%;text-transform:uppercase;overflow-wrap:anywhere}
.pf-tete h2:focus{outline:none}
.pf-bloc{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:12px 0;border-top:1px dashed var(--ligne)}
.pf-vignette .arche-svg{display:block;width:44px;height:auto}
.pf-chap{margin:0 0 8px;font-size:1.0625rem;line-height:1.3;overflow-wrap:anywhere}
.pf-bloc ul{list-style:none;margin:0;padding:0}
.pf-bloc li{display:flex;gap:8px;align-items:flex-start;margin-bottom:7px;font-size:.875rem;line-height:1.35}
.pf-bloc li .hab-svg{flex:none;margin-top:1px}
/* Procession (planche 22, É5) : l'étiquette « ch. n » en vignette ; le vrai numéro devant chaque titre. */
.pf-ch{display:inline-block;background:var(--noir);color:var(--papier);font:800 .8125rem/1 var(--f-titre);font-stretch:75%;padding:5px 6px 3px;transform:rotate(-3deg);white-space:nowrap}
.pf-nums li{gap:10px}
.pf-no{flex:none;width:18px;font:800 .9375rem/1.3 var(--f-titre);font-stretch:75%}
.pf-bloc a{color:var(--noir);text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere;min-width:0}
/* Le pied (tampon, « Rentrer ») reste en bas, juste au-dessus du menu : le tampon se voit même quand la liste est longue. */
.pf-pied{position:sticky;bottom:calc(-1 * var(--e4));margin:0 calc(-1 * var(--e4)) calc(-1 * var(--e4));
  padding:var(--e2) var(--e4) var(--e3);background:var(--feuille);border-top:1px dashed var(--ligne);
  display:flex;flex-direction:column;gap:6px}
/* Fin de partie : la barre d'actions s'efface, la page descend jusqu'au menu (son « Rentrer » est dans le pied). */
body.jeu-fin #ecrans{bottom:calc(var(--h-menu, 78px) + 22px)}   /* juste au-dessus du bord déchiré */
body.jeu-fin .actions{visibility:hidden}
body.jeu-fin .ecran.en-jeu{padding-bottom:0}
/* Ligne 16 : le tampon, dans la marge. Éclat --t-eclat, Encre ; réduit : fondu 200 ms. Jamais le texte du livre. */
.tampon{align-self:flex-end;margin:2px 2px 0 0;padding:6px 8px 4px;border:2.5px solid var(--tournesol);background:rgba(242,168,29,.12);
  color:#9A6320;font:800 .8125rem/1 var(--f-titre);font-stretch:75%;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;
  opacity:0;transform:rotate(-6deg) scale(1.25)}
.tampon.pose{opacity:1;transform:rotate(-6deg);transition:opacity var(--t-eclat) var(--c-encre),transform var(--t-eclat) var(--c-encre)}
.reduit .tampon{transform:rotate(-6deg)}
.reduit .tampon.pose{transition:opacity 200ms linear}
.pf-rentrer{display:block;width:100%;min-height:48px;margin:0;padding:10px;border:0;background:var(--noir);
  color:var(--papier);font:800 1.0625rem/1 var(--f-titre);font-stretch:78%;text-transform:uppercase;letter-spacing:.02em;
  box-shadow:3px 3px 0 var(--tournesol);cursor:pointer}
.pf-rentrer:focus-visible{outline:3px solid var(--tournesol);outline-offset:3px}

/* ---------- La consigne du début (Jeux §0) ---------- */
/* Un bandeau en haut de l'écran de jeu, dans le flux (la scène lui laisse sa place, rien n'est caché) : une phrase à l'impératif, qui change à chaque étape. Il se replie au premier geste réussi. */
.consigne{flex:none;margin:0 0 8px;padding:8px 12px;background:var(--feuille);border:1.5px solid var(--noir);
  font:700 .90625rem/1.3 var(--f-texte);color:var(--noir);text-wrap:balance;
  transition:transform var(--t-court) var(--c-houle),opacity var(--t-court)}
.consigne.repli{transform:translateY(-105%);opacity:0;pointer-events:none}
.consigne.ferme{display:none}                                         /* retiré du flux une fois replié : la scène reprend sa place */
.reduit .consigne{transition:opacity 200ms linear}                   /* version réduite : fondu 200 ms, aucun déplacement */
.reduit .consigne.repli{transform:none}
/* La main qui montre le geste, une fois par jeu. Elle ne reçoit aucun toucher. */
.main-consigne{position:absolute;z-index:17;pointer-events:none}
.main-consigne svg{display:block}

/* Pages d'une Mesure clé trop longue (js/ui/panneau-pages.js, 14/11/2026) : 5 lignes au plus, la page change sur place. */
.carte-cit.pages{display:grid;touch-action:pan-y;margin-bottom:0}
.carte-cit.pages > .page{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity 150ms linear,visibility 0s linear 150ms}
.carte-cit.pages > .page.active{opacity:1;visibility:visible;transition:opacity 150ms linear}
.carte-cit.pages.sans-fondu > .page{transition:none}
.pages-nav{display:flex;align-items:center;justify-content:flex-end;gap:2px;margin:2px -10px -10px 0}
.pages-nav button{width:48px;height:48px;border:0;background:none;color:var(--noir);font:700 1.5rem/1 var(--f-texte);cursor:pointer}
.pages-nav button:disabled{opacity:.25;cursor:default}
.pages-nav button:focus-visible{outline:2.5px solid var(--noir);outline-offset:-6px;border-radius:8px}
.pages-n{min-width:2.5em;text-align:center;font:700 .875rem/1 var(--f-texte);color:var(--texte-2)}