/* ============================================================================
   game-table.css — l'ÉCRAN DE TABLE, dans la langue de game.css.

   Chargé par le layout `game`, APRÈS game.css. Il n'en redéfinit aucun token et
   n'en surcharge aucune règle : il ajoute ce que les écrans de table demandent et
   que la coque de myLore n'avait pas — le seuil du jeu, les fiches de monde, la
   porte de la Genèse, la liste de ses tables.

   Pourquoi une feuille à part plutôt qu'un ajout dans game.css : le portage doit
   rester comparable à sa source d'un simple diff. Ce fichier est le delta, et il
   se lit comme tel.

   Règles tenues :
   - aucune couleur en dur qui ne soit déjà un token de game.css (--gold, --parch,
     --blood-deep, --border-gold…) ; les deux exceptions sont les encres du
     parchemin clair, qui n'existent pas côté sombre et sont donc déclarées ici en
     tokens plutôt que semées dans les règles ;
   - plein cadre, jamais de colonne centrée étroite : la table occupe l'écran ;
   - un écran = une page, sans défilement de structure. Ce qui déborde défile
     DANS son rail (les fiches), jamais le document.
   ========================================================================== */

:root{
  /* Encres du parchemin clair — la carte-scénario de la promenade, seule surface
     claire de la charte. Déclarées en tokens pour que les fiches et la liste des
     tables citent la même encre. */
  --card-face:linear-gradient(160deg,#e9d9a8,#d8c489);
  --card-ink:#241a0c;
  --card-ink-soft:#5a4526;
  --card-ink-faint:#6a5326;
  --card-seal:rgba(120,90,45,.16);
  --card-seal-edge:rgba(120,90,45,.30);
}

/* game.css fige body{overflow:hidden} pour la scène plein cadre du jeu : on le
   garde, et c'est le rail des fiches qui défile quand il y en a trop. */
.table-body{overflow:hidden}

/* ---------- FOND NOCTURNE : la scène AVANT qu'il y ait une scène ---------- */
/* Les écrans de seuil n'ont pas encore de lieu à montrer : pas d'image, donc pas
   de `.scene__img` — et un `#0a0603` plat serait un trou noir là où la charte est
   chaude. Le sol chaud tenu par les seules couches d'ambiance de game.css
   (bougie, étalonnage, grain, vignette), c'est l'assise du jeu avant le monde.
   Ce n'est pas un repli sur une image manquante : ces écrans n'en ont aucune à
   attendre. */
.scene--nocturne{background:radial-gradient(120% 100% at 50% 30%,#241708,#0c0703 75%)}

/* ---------- SEUIL : la colonne centrale d'un écran de table ---------- */
/* Plein cadre, centré verticalement, sous la barre haute. Aucune largeur fixe :
   la mesure du texte est bornée par des `em` sur les blocs de texte eux-mêmes. */
.table-stage{
  position:fixed;inset:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,1.8vw,30px);
  padding:clamp(96px,11vh,132px) clamp(20px,4vw,64px) clamp(28px,5vh,64px);
  text-align:center;
}
/* Variante « rail » : l'écran des fiches et celui des tables alignent des cartes
   qui peuvent déborder — elles défilent horizontalement, le document jamais. */
.table-stage--rail{justify-content:center}

.table-hail{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.4em;
  font-size:clamp(9px,.72vw,12px);color:var(--gold);
  text-shadow:0 0 18px rgba(201,162,75,.28);
}
.table-lede{
  font-style:italic;font-size:clamp(19px,2vw,34px);line-height:1.4;
  color:var(--parch);max-width:26em;text-wrap:balance;
  text-shadow:0 2px 26px rgba(0,0,0,.9);
}
.table-note{
  font-style:italic;font-size:clamp(13px,1.05vw,17px);line-height:1.55;
  color:var(--parch-dim);max-width:38em;text-wrap:balance;
}

/* ---------- GESTES : la langue de .send (or) et de .restart-cta (fantôme) ---------- */
.gestes{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,26px);justify-content:center;
  margin-top:clamp(6px,1vw,14px)}

.cta{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(11px,.92vw,15px);color:var(--ink);text-decoration:none;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  border:0;padding:clamp(12px,1.05vw,18px) clamp(22px,2.1vw,38px);
  clip-path:polygon(11px 0,100% 0,100% 100%,0 100%,0 11px);
  box-shadow:0 4px 16px rgba(201,162,75,.28);
  transition:filter .25s ease,transform .25s ease,box-shadow .25s ease;
}
.cta:hover,.cta:focus-visible{outline:none;filter:brightness(1.08);transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(201,162,75,.4)}
.cta:disabled,.cta[aria-disabled="true"]{filter:grayscale(.4) brightness(.8);cursor:default;
  transform:none;box-shadow:none}

.ghost{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;text-decoration:none;
  padding:clamp(10px,.92vw,16px) clamp(16px,1.6vw,28px);border-radius:999px;
  color:var(--parch-soft);background:rgba(20,15,9,.42);
  border:1px solid var(--border-strong);
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(10px,.8vw,13px);text-shadow:0 1px 8px #000;
  backdrop-filter:blur(3px);
  transition:opacity .25s ease,transform .25s ease,color .25s ease,background .25s ease;
}
.ghost:hover,.ghost:focus-visible{outline:none;color:var(--gold-bright);
  background:rgba(20,15,9,.62);border-color:var(--border-gold);transform:translateY(-1px)}
/* Un geste qui ne mène nulle part n'est pas offert : il est dit, et il est éteint.
   Une porte grisée qui s'ouvre quand même serait pire qu'une porte absente. */
.ghost--mute{opacity:.42;cursor:default;pointer-events:none}

.retour{
  position:fixed;left:clamp(18px,2.4vw,40px);bottom:clamp(18px,2.6vh,34px);z-index:28;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.22em;
  font-size:clamp(9px,.7vw,11px);color:var(--muted);
  transition:color .25s ease;
}
.retour:hover,.retour:focus-visible{outline:none;color:var(--gold-bright)}

/* ---------- FICHES DE MONDE : parchemin clair, encre brune ---------- */
.scen-row{
  display:flex;align-items:stretch;justify-content:center;
  gap:clamp(14px,1.9vw,32px);
  width:100%;max-width:100%;
  padding:clamp(14px,1.6vw,26px) clamp(4px,1vw,18px);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent;
}
.scen{
  position:relative;flex:0 0 clamp(230px,20vw,330px);
  display:flex;flex-direction:column;text-align:left;
  padding:clamp(16px,1.5vw,26px) clamp(15px,1.4vw,24px) clamp(14px,1.3vw,22px);
  background:var(--card-face);color:var(--card-ink);
  clip-path:polygon(0 0,100% 1.5%,98.5% 100%,1.5% 98.5%);
  box-shadow:0 18px 38px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4);
  transform:rotate(var(--r,0deg));
  transition:transform .3s ease,box-shadow .3s ease;
}
.scen:nth-child(3n+1){--r:-1.6deg}
.scen:nth-child(3n+2){--r:.8deg}
.scen:nth-child(3n){--r:-.6deg}
.scen .k{font-family:var(--cond);text-transform:uppercase;letter-spacing:.22em;
  font-size:clamp(8px,.62vw,10px);color:var(--blood-deep)}
.scen h4{font-family:var(--serif);font-weight:600;line-height:1.1;
  font-size:clamp(19px,1.6vw,27px);margin:.35em 0 .3em;color:var(--card-ink)}
.scen p{font-style:italic;line-height:1.45;color:var(--card-ink-soft);
  font-size:clamp(12px,.92vw,15px)}
.scen .badge{display:inline-block;align-self:flex-start;margin-top:auto;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(8px,.6vw,10px);padding:.4em 1.1em;border-radius:99px;
  background:var(--card-seal);color:var(--card-ink-faint);
  box-shadow:inset 0 0 0 1px var(--card-seal-edge)}
.scen .badge + .badge{margin-top:.6em;margin-left:.4em}

/* La fiche est un bouton de formulaire plein : toute la carte se clique. */
button.scen{border:0;cursor:pointer;font:inherit;width:100%}
button.scen:hover,button.scen:focus-visible{outline:none;
  transform:rotate(var(--r,0deg)) translateY(-4px);
  box-shadow:0 26px 50px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.5)}
.scen-form{display:contents}

/* ---------- PORTE GENÈSE : la fiche sombre, à part ---------- */
.scen--genese{
  background:linear-gradient(165deg,#211710,#140d07);color:var(--parch);
  clip-path:none;border:1px solid var(--border-gold);
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.18),0 18px 38px rgba(0,0,0,.6);
  --r:0deg;
}
.scen--genese .k{color:var(--gold)}
.scen--genese h4{color:var(--gold-bright)}
.scen--genese p{color:var(--parch-dim)}
.scen--genese .field{
  margin-top:.9em;padding:.75em .85em;width:100%;resize:none;
  font-family:var(--serif);font-style:italic;font-size:clamp(12px,.92vw,15px);
  line-height:1.45;color:var(--parch);
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(20,12,4,.55));
  border:1px solid var(--border-gold);outline:none;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.scen--genese .field::placeholder{color:var(--muted);opacity:1}
.scen--genese .field:focus{border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(201,162,75,.25) inset}
.scen--genese .cta{margin-top:.9em;align-self:flex-start}

/* ---------- REFUS : dit dans la page, jamais dans une pile qui n'existe pas ---------- */
.refus{
  display:flex;align-items:flex-start;gap:12px;max-width:52em;
  padding:clamp(11px,1vw,16px) clamp(14px,1.3vw,22px);
  border:1px solid rgba(184,64,47,.55);
  background:linear-gradient(180deg,rgba(124,42,32,.26),rgba(20,12,4,.5));
  color:var(--parch);font-style:italic;text-align:left;
  font-size:clamp(12px,.95vw,16px);line-height:1.5;
}
.refus::before{
  content:"";flex:none;width:9px;height:9px;margin-top:.45em;border-radius:50%;
  background:var(--blood);box-shadow:0 0 10px rgba(184,64,47,.7);
}

/* ---------- ÉTAT D'ATTENTE : nommé, jamais maquillé en progrès ---------- */
/* Aucune animation, aucun point qui pulse : rien n'avance, et l'écran ne doit pas
   laisser croire le contraire (doctrine §1). */
.attente{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:auto;
  padding:.42em 1em;border-radius:999px;
  border:1px solid var(--border-strong);background:rgba(20,15,9,.5);
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(8px,.6vw,10px);color:var(--parch-soft);
}
.attente::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  border:1px solid var(--muted);background:transparent}
.attente--pret{border-color:var(--border-gold);color:var(--gold-bright)}
.attente--pret::before{border-color:var(--gold);background:var(--gold)}

/* ---------- LISTE DES TABLES ---------- */
.tables{
  display:grid;gap:clamp(12px,1.4vw,22px);width:100%;
  grid-template-columns:repeat(auto-fill,minmax(clamp(260px,22vw,360px),1fr));
  align-content:start;
  max-height:100%;overflow-y:auto;padding:clamp(6px,.8vw,14px);
  scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;
}
.tables .scen{flex:1 1 auto;width:auto}
.tables .scen--genese{min-height:100%}

.table-vide{
  font-style:italic;font-size:clamp(15px,1.3vw,22px);color:var(--parch-dim);
  max-width:30em;text-wrap:balance;
}

/* ==========================================================================
   ÉCRAN DE TABLE (écran 4) — la veillée à gauche, le sceau à droite.

   Le seul écran du parcours qu'on regarde à PLUSIEURS, et de loin : c'est ce
   qui décide de sa composition. Deux blocs, pas un de plus ; le sceau tient sa
   colonne à droite parce qu'un motif à scanner doit rester au même endroit
   pendant que le reste de l'écran change. Rien ne défile : un écran de table
   qui demanderait à la tablée de faire défiler serait un écran raté.
   ========================================================================== */
.table-scene{
  position:fixed;inset:0;z-index:6;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(300px,26vw,440px);
  align-items:center;
  gap:clamp(20px,3vw,56px);
  padding:clamp(96px,11vh,132px) clamp(20px,4vw,64px) clamp(28px,5vh,64px);
}

/* ---------- LA VEILLÉE : la place du récit, et ce qu'elle dit en son absence ---------- */
.veillee{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1.3vw,20px)}
.veillee .table-hail,.veillee .table-note{text-align:left}

/* Le silence du moteur, écrit à la place du récit. Même mesure et même italique
   que la voix qui l'occupera un jour — mais en encre éteinte, pour qu'on ne
   confonde jamais l'attente avec ce qu'on attend. */
.silence{
  font-style:italic;font-size:clamp(17px,1.7vw,28px);line-height:1.45;
  color:var(--parch-dim);max-width:22em;text-wrap:pretty;
  text-shadow:0 2px 26px rgba(0,0,0,.9);
}
/* Le souhait de monde, rendu tel qu'il a été écrit : cité, jamais reformulé. */
.souhait{
  margin:0;padding-left:clamp(12px,1.1vw,20px);
  border-left:2px solid var(--border-gold);
  font-style:italic;font-size:clamp(13px,1.05vw,17px);line-height:1.5;
  color:var(--parch-soft);max-width:34em;
}

/* ---------- LE SCEAU : cadre d'or, motif sombre sur parchemin ---------- */
.sceau{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(8px,.9vw,14px);text-align:center;
}
.sceau__cadre{
  position:relative;padding:clamp(10px,1vw,18px);
  background:linear-gradient(180deg,rgba(30,19,9,.9),rgba(12,8,4,.95));
  border:1px solid var(--border-gold);
  box-shadow:0 0 34px rgba(201,162,75,.18),0 18px 40px rgba(0,0,0,.6);
}
.sceau__cadre .cnr{position:absolute;width:clamp(9px,.9vw,15px);height:clamp(9px,.9vw,15px);
  border:2px solid var(--gold)}
.sceau__cadre .cnr.tl{top:-2px;left:-2px;border-right:0;border-bottom:0}
.sceau__cadre .cnr.tr{top:-2px;right:-2px;border-left:0;border-bottom:0}
.sceau__cadre .cnr.bl{bottom:-2px;left:-2px;border-right:0;border-top:0}
.sceau__cadre .cnr.br{bottom:-2px;right:-2px;border-left:0;border-top:0}

/* Le motif : encre sombre sur parchemin clair, et une zone de silence portée
   par le SVG lui-même. Ce n'est pas un choix de goût — c'est ce que la
   spécification du format exige pour qu'un lecteur trouve le motif. L'or et sa
   lueur vivent AUTOUR, dans le cadre, jamais dans le carré. */
.qr{
  display:block;width:clamp(150px,13vw,230px);height:auto;
  background:var(--card-face);
}
.qr__ink{fill:var(--card-ink)}

.sceau__lbl{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.24em;
  font-size:clamp(9px,.72vw,12px);color:var(--gold-bright);
}
/* L'adresse en clair, sous le motif : tout le monde n'a pas un appareil photo
   sous la main, et la recopier doit rester possible. `anywhere` plutôt que
   `break-all` pour que la coupure tombe où elle peut, pas au milieu d'un mot. */
.sceau__url{
  font-family:var(--sans);font-size:clamp(9px,.72vw,12px);line-height:1.5;
  color:var(--parch-dim);overflow-wrap:anywhere;max-width:30ch;
}
.sceau__fin{font-style:italic;font-size:clamp(11px,.85vw,14px);color:var(--muted)}

/* ---------- LES SIÈGES : une puce par place prise, une qui attend ---------- */
.sieges{display:flex;flex-wrap:wrap;gap:clamp(6px,.6vw,10px);justify-content:center;
  margin-top:clamp(4px,.6vw,10px)}
.jchip{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.42em 1.05em;border-radius:99px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(9px,.68vw,12px);
  border:1px solid var(--border-gold);color:var(--gold-bright);
  background:rgba(20,15,9,.5);
}
.jchip i{flex:none;width:.5em;height:.5em;border-radius:50%;
  background:var(--gold-bright);box-shadow:0 0 6px rgba(234,202,122,.8)}
/* Le siège libre ne pulse pas : personne n'a déclaré combien de convives cette
   table attend, et un point qui clignote promettrait une arrivée que rien ne
   fonde. Il est éteint, et c'est tout ce qu'il a le droit de dire. */
.jchip--libre{border-color:var(--border-strong);color:var(--muted)}
.jchip--libre i{background:transparent;border:1px solid var(--muted);box-shadow:none}

/* ==========================================================================
   LE REGISTRE (écran 5) — l'appareil du joueur.

   Le seul écran du parcours qui soit d'abord un téléphone. Il se dessine donc
   pour une main : une colonne, bornée en `ch` plutôt qu'en `vw`, qui ne
   s'étale pas sur grand écran. Un formulaire de trente secondes n'a rien à
   gagner à occuper deux mille pixels.
   ========================================================================== */
.registre{
  display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(10px,1.2vw,18px);
  width:min(100%,34rem);text-align:left;
}
.registre .table-hail{text-align:left}
.registre__voix{
  font-style:italic;font-size:clamp(16px,1.5vw,24px);line-height:1.45;
  color:var(--parch);text-wrap:pretty;text-shadow:0 2px 26px rgba(0,0,0,.9);
}
.registre__form{display:flex;flex-direction:column;gap:clamp(8px,.9vw,14px)}
.registre__deja{font-style:italic;font-size:clamp(13px,1.05vw,17px);line-height:1.5;
  color:var(--parch-soft)}
.registre__note{font-style:italic;font-size:clamp(12px,.95vw,15px);line-height:1.55;
  color:var(--muted)}

/* Les champs du registre reprennent l'encre de la porte Genèse : même entaille
   au coin, même fond creusé, même liseré d'or au foyer. Une seule langue de
   saisie dans tout le jeu. */
.registre .field{
  width:100%;padding:.8em .9em;
  font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.1vw,18px);
  line-height:1.4;color:var(--parch);
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(20,12,4,.55));
  border:1px solid var(--border-gold);outline:none;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.registre .field::placeholder{color:var(--muted);opacity:1}
.registre .field:focus{border-color:var(--gold);box-shadow:0 0 0 1px rgba(201,162,75,.25) inset}
.registre .cta{align-self:flex-start;margin-top:.3em}

/* LES DEUX PORTES du registre. Signer et reprendre sa place sont le MÊME geste
   et le même formulaire ; ce bloc dit seulement lequel des deux cas on vit.
   Il était une ligne en petit sous le bouton, et personne ne la trouvait — d'où
   deux cartouches à égalité, au-dessus des champs, dans l'encre de la colonne. */
.registre__seuil{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(8px,.8vw,14px);
}
.porte{
  display:flex;flex-direction:column;gap:.35em;
  padding:clamp(9px,.85vw,14px) clamp(11px,1vw,17px);
  background:linear-gradient(180deg,rgba(30,19,9,.72),rgba(12,8,4,.86));
  border:1px solid var(--border-gold);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.porte__k{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(9px,.65vw,11px);color:var(--gold);
}
.porte p{
  font-family:var(--serif);font-style:italic;line-height:1.45;
  font-size:clamp(12px,.95vw,15px);color:var(--parch-soft);
}
/* Ce qu'un champ demande vraiment, sous le champ. En encre éteinte : c'est une
   précision, pas une seconde question. */
.registre__dit{
  font-style:italic;font-size:clamp(11px,.88vw,14px);line-height:1.5;
  color:var(--muted);margin-top:-.3em;
}

/* ==========================================================================
   CE QUE L'APPLICATION A À DIRE — le pont Flash des coques sans script.

   `element/flash/*` ne rend qu'un `<div data-toastr hidden>` que `app.js` lit ;
   sans lui, le message serait invisible. Les coques du jeu et du seuil rendent
   donc la phrase dans la page, et celle-ci lui donne sa forme : une bande de
   parchemin, sans couleur qui prétende juger ce qu'elle dit (voir
   `element/game/annonce.php` pour pourquoi le type ne survit pas au rendu).
   ========================================================================== */
.annonce{
  padding:clamp(9px,.85vw,14px) clamp(12px,1.1vw,18px);
  border-left:2px solid var(--gold);
  background:linear-gradient(90deg,rgba(201,162,75,.14),rgba(20,12,4,.35));
  color:var(--parch);font-style:italic;text-align:left;
  font-size:clamp(12px,.95vw,16px);line-height:1.5;
}

/* ==========================================================================
   LE PALIER DE L'APPAREIL — ce que le téléphone montre quand rien n'est à toi.

   Même colonne que le registre : c'est le même objet dans la même main. Il n'y
   a rien à y faire, et c'est ce que la page dit — elle ne dessine ni forge en
   cours, ni siège qui se remplit, ni compte à rebours.
   ========================================================================== */
.appareil{
  display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(10px,1.2vw,18px);
  width:min(100%,34rem);text-align:left;
}
.appareil .table-hail{text-align:left}
.appareil__voix{
  font-style:italic;font-size:clamp(16px,1.5vw,24px);line-height:1.45;
  color:var(--parch);text-wrap:pretty;text-shadow:0 2px 26px rgba(0,0,0,.9);
}
.appareil__note{
  font-style:italic;font-size:clamp(12px,.95vw,15px);line-height:1.55;
  color:var(--muted);
}
.appareil .cta{align-self:flex-start}

/* ==========================================================================
   LA FORGE (écran 3) — « la genèse œuvre ».

   L'écran qu'on regarde pendant une minute, à plusieurs, sans rien pouvoir y
   faire. Il n'a donc qu'un travail : rendre cette minute HABITÉE, sans mentir
   d'une seconde.

   Ce qu'on ne trouvera pas ici, et c'est délibéré :
   - aucune barre de progression, aucun pourcentage. Personne ne sait combien de
     temps le prochain appel prendra ; une jauge à vitesse constante mentirait à
     chaque poste ;
   - aucun voile qui tourne. Un voile tourne aussi bien sur une forge morte.

   Ce qui bouge, à la place : les phrases apparaissent. Chacune est un poste
   réellement franchi, et porte un extrait de ce qu'il a écrit. Le mouvement
   n'est pas une décoration posée par-dessus l'attente — c'est l'attente qui se
   remplit.
   ========================================================================== */
.forge-scene{
  position:relative;z-index:2;
  min-height:100dvh;display:grid;align-content:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,72px);
  padding:clamp(76px,9vh,120px) clamp(20px,4vw,64px) clamp(56px,7vh,88px);
}

/* ---------- CE QUI A ÉTÉ DEMANDÉ : le nom, puis le souhait cité ---------- */
.forge-demande{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(10px,1.3vw,20px)}
.forge-demande .table-hail,.forge-demande .table-note{text-align:left}

/* Le nom du monde est la plus grosse chose de l'écran, et il l'est AVANT que le
   monde existe : c'est la promesse qu'on regarde se tenir. */
.forge-nom{
  font-family:var(--serif);font-weight:600;line-height:1.05;
  font-size:clamp(34px,4.4vw,72px);color:var(--parch);
  text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.9);
}

/* ---------- LA LITANIE : un poste, une phrase ---------- */
.forge-oeuvre{display:flex;flex-direction:column;justify-content:center;min-width:0}
.forge{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(10px,1.2vw,18px);width:100%}

.litanie{
  list-style:none;margin:0;padding:0;width:100%;
  display:flex;flex-direction:column;gap:clamp(8px,1vw,15px);
  max-height:58dvh;overflow-y:auto;
}
.dit{
  position:relative;padding-left:clamp(20px,1.9vw,32px);
  /* Une phrase ne glisse pas depuis le bord : elle affleure. La charte du jeu ne
     fait pas entrer les choses par le côté, elle les fait remonter de l'ombre. */
  animation:affleure .9s ease-out both;
}
@keyframes affleure{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* La marque : une braise. Éteinte pour ce qui n'est pas encore arrivé, vive pour
   ce qui a été franchi, respirante pour le poste qui est parti. Elle ne compte
   rien et ne mesure rien — elle dit qu'un appel est en vol. */
.dit__marque{
  position:absolute;left:0;top:.5em;
  width:clamp(7px,.62vw,10px);height:clamp(7px,.62vw,10px);border-radius:50%;
  border:1px solid var(--border-strong);background:transparent;
}
.dit__voix{
  font-family:var(--serif);font-size:clamp(16px,1.5vw,25px);line-height:1.35;
  color:var(--muted);text-wrap:pretty;
}
/* La preuve : ce que le poste a réellement rendu. C'est la seule raison pour
   laquelle regarder la forge vaut mieux que regarder un sablier. */
.dit__preuve{
  margin-top:.25em;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(13px,1.05vw,17px);line-height:1.5;
  color:var(--parch-dim);text-wrap:pretty;
}
.dit__arret{
  margin-top:.3em;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.18em;font-size:clamp(9px,.72vw,12px);color:var(--blood);
}

.dit--franchi .dit__voix{color:var(--parch)}
.dit--franchi .dit__marque{background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 10px rgba(201,162,75,.55)}

.dit--arrete .dit__voix{color:var(--parch-soft)}
.dit--arrete .dit__marque{background:var(--blood-deep);border-color:var(--blood)}

.dit--courant .dit__voix{color:var(--gold-bright)}
.dit--courant .dit__marque{
  background:var(--gold-bright);border-color:var(--gold-bright);
  animation:braise 2.4s ease-in-out infinite;
}
@keyframes braise{
  0%,100%{box-shadow:0 0 5px rgba(234,202,122,.45);opacity:.55}
  50%{box-shadow:0 0 16px rgba(234,202,122,.95);opacity:1}
}

.dit--attendu{opacity:.42}

/* ---------- CE QUE LA FORGE DIT D'ELLE-MÊME ---------- */
.forge__seuil,.forge__reprise,.forge__envol,.forge__note{
  font-style:italic;line-height:1.55;color:var(--parch-soft);
  font-size:clamp(13px,1.05vw,17px);max-width:56ch;
}
.forge__note{color:var(--muted);font-size:clamp(12px,.95vw,15px)}

/* La reprise n'est pas une alerte : c'est un constat. Le liseré d'or dit
   « regarde ici », le ton reste celui du reste de l'écran. */
.forge__reprise{
  border-left:2px solid var(--border-gold);padding-left:.9em;color:var(--parch-dim);
}

/* L'échec, lui, se voit. Le jeu n'a pas de pile de notifications où le perdre :
   il le dit dans la page, et il l'y laisse. */
.forge__echec{
  font-family:var(--sans);font-size:clamp(12px,.95vw,15px);line-height:1.55;
  color:var(--parch);background:rgba(124,42,32,.18);
  border-left:2px solid var(--blood);padding:.7em .9em;
  max-width:64ch;overflow-wrap:anywhere;
}

/* ---------- LE MONDE POSÉ : le seul compte affiché, parce qu'il est vrai ---- */
.forge__monde{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(8px,.9vw,14px);margin-top:.4em}
.forge__ne{
  font-family:var(--serif);font-size:clamp(17px,1.6vw,26px);line-height:1.35;
  color:var(--gold-bright);text-wrap:pretty;
}

/* ---------- Écrans étroits : les fiches passent en colonne ---------- */
@media (max-width:860px){
  /* ## Les scènes repassent dans le flux — cf. la doctrine du palier, game.css
     Le `body{overflow:hidden}` que ce fichier redit ligne 36 est levé par
     game.css sous ce même palier ; il faut le lever ICI aussi, parce que
     `.table-body` (0,1,0) l'emporte sur `body` (0,0,1). Les deux scènes quittent
     alors `position:fixed;inset:0` pour la forme que ce projet donne DÉJÀ à ses
     conteneurs de flux — `.forge-scene` et `.paume` sont écrites comme ça depuis
     le début : `position:relative` + `min-height:100dvh`. On n'invente pas un
     patron, on étend celui de la maison à deux conteneurs qui l'avaient manqué.

     `relative` et non `static` : la scène doit rester POSITIONNÉE pour que son
     `z-index:6` continue de la peindre au-dessus de `.scene`, le décor, qui est
     `fixed` et donc peint dans la couche des positionnés. Une scène `static`
     passerait DERRIÈRE son propre décor. */
  .table-body{overflow:auto}
  .table-stage,.table-scene{
    position:relative;inset:auto;min-height:100dvh;
  }
  /* La forge passe en une colonne, la litanie EN PREMIER : sur un téléphone, ce
     qu'on est venu regarder est le monde qui se lève, pas ce qu'on a tapé. */
  .forge-scene{grid-template-columns:minmax(0,1fr);align-content:start}
  .forge-demande{order:2}
  .forge-oeuvre{order:1}
  .litanie{max-height:none}
  .scen-row{flex-direction:column;align-items:stretch;overflow-x:hidden;overflow-y:auto}
  .scen{flex:0 0 auto;--r:0deg}
  .scen:nth-child(3n+1),.scen:nth-child(3n+2),.scen:nth-child(3n){--r:0deg}
  .table-stage{justify-content:flex-start}
  /* L'écran de table passe en une colonne, sceau EN PREMIER : sur un téléphone,
     ce qu'on est venu chercher est le motif, pas la place du récit. */
  .table-scene{
    grid-template-columns:minmax(0,1fr);
    align-content:start;
  }
  .veillee{order:2}
  .sceau{order:1}
  .registre{width:100%}
  /* ## Le lien de retour descend de son coin
     Il était fixé au bas de la fenêtre parce que rien ne défilait : c'était le
     seul moyen de le garder à portée. Maintenant que le document défile, un
     coin fixe se poserait par-dessus le dernier geste de l'écran — sur la
     paume, exactement là où tombent « Inscrire » et la sortie vers la carte. Il
     reprend donc sa place, qui est la dernière du document, et il y est centré.
     `relative` plutôt que `static` pour la même raison que les scènes : il
     garde son `z-index:28`, donc il reste devant le décor fixe. */
  .retour{
    position:relative;left:auto;bottom:auto;
    display:flex;justify-content:center;
    padding:0 clamp(20px,4vw,64px)
            calc(clamp(18px,2.6vh,34px) + env(safe-area-inset-bottom));
  }
}

/* ---------- Mouvement réduit : les transitions tombent, rien d'autre ---------- */
@media (prefers-reduced-motion:reduce){
  .cta,.ghost,.scen,.retour{transition:none}
  button.scen:hover,button.scen:focus-visible{transform:rotate(var(--r,0deg))}
  /* La braise et l'affleurement tombent, la LITANIE reste : ce qui portait
     l'information était la phrase, jamais son entrée en scène. La braise du
     poste en vol garde donc sa couleur pleine, sans respirer. */
  .dit{animation:none}
  .dit--courant .dit__marque{animation:none;box-shadow:0 0 12px rgba(234,202,122,.8)}
}

/* ==========================================================================
   LE FIL — la parole du meneur, et ce qui viendra dessous.

   La voix d'ouverture n'est pas un panneau de décor : c'est le PREMIER TOUR de
   la partie. On la dessine donc comme une prise de parole dans un fil, et pas
   comme un cartouche : une marque de locuteur en petites capitales, un filet
   d'or à gauche qui court sur toute la hauteur du dit, puis la prose en serif
   pleine mesure.

   Le filet est vertical À DESSEIN. C'est la seule forme qui reste juste quand
   les répliques suivantes s'ajouteront : chaque tour porte le sien, et la
   colonne d'or devient la trace de qui a parlé quand. Un encadré aurait fermé
   la parole sur elle-même, et il aurait fallu le défaire à l'écran suivant.
   ========================================================================== */
.fil{
  list-style:none;margin:0;padding:0;width:100%;
  display:flex;flex-direction:column;gap:clamp(14px,1.8vw,26px);
  max-height:64dvh;overflow-y:auto;
}
/* Le fil du suivi d'ouverture n'a qu'un tour et vit sous une litanie : il ne
   défile pas pour son propre compte, la page le porte. */
.fil--seul{max-height:none;overflow:visible}

.parole{
  position:relative;padding-left:clamp(14px,1.4vw,22px);
  border-left:2px solid var(--border-gold);
  animation:affleure 1.1s ease-out both;
}
/* Qui parle. En capitales condensées, comme les didascalies du reste du jeu :
   c'est une indication de scène, pas une partie du texte dit. */
.parole__qui{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.22em;
  font-size:clamp(9px,.7vw,12px);color:var(--gold);margin-bottom:.5em;
}
.parole__dit p{
  font-family:var(--serif);font-size:clamp(15px,1.32vw,22px);line-height:1.55;
  color:var(--parch);text-wrap:pretty;
}
.parole__dit p + p{margin-top:.7em}
/* La parole du meneur porte l'or ; les répliques des joueurs prendront un autre
   liseré quand elles existeront. Rien n'est posé d'avance pour elles. */
.parole--meneur{border-left-color:var(--gold)}

/* ==========================================================================
   LE SEUIL DE L'OUVERTURE — qui prend place.

   Trois fiches, cochables, rien de coché d'avance. La case est VISIBLE et le
   libellé entier est cliquable : c'est un choix qu'on fait à plusieurs, parfois
   sur un écran partagé, et une case de 12px ne se vise pas à deux mètres.
   ========================================================================== */
.compagnie-form{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(8px,.9vw,14px);width:100%}
.compagnie-form .table-hail{text-align:left}

.pretires{list-style:none;margin:0;padding:0;width:100%;
  display:flex;flex-direction:column;gap:clamp(6px,.7vw,11px)}
.pretire label{
  display:flex;align-items:baseline;gap:.75em;cursor:pointer;
  padding:.6em .85em;
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(20,12,4,.5));
  border:1px solid var(--border-strong);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:border-color .18s ease,background .18s ease;
}
.pretire label:hover,.pretire label:focus-within{border-color:var(--border-gold)}
/* La case cochée allume la fiche entière : à deux mètres d'un écran de table,
   c'est la ligne qu'on voit changer, pas le carré de 14 pixels. */
.pretire label:has(input:checked){
  border-color:var(--gold);
  background:linear-gradient(180deg,rgba(201,162,75,.10),rgba(20,12,4,.55));
}
.pretire input{
  flex:none;width:clamp(14px,1.15vw,18px);height:clamp(14px,1.15vw,18px);
  accent-color:var(--gold);cursor:pointer;
}
.pretire__nom{
  font-family:var(--serif);font-size:clamp(15px,1.25vw,21px);line-height:1.2;
  color:var(--parch);
}
.pretire__quoi{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(12px,.95vw,15px);line-height:1.4;color:var(--parch-dim);
}

@media (max-width:860px){
  .fil{max-height:none}
  .pretire label{flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  /* Ce qui portait l'information était la parole, jamais son entrée en scène. */
  .parole{animation:none}
  .pretire label{transition:none}
}

/* ==========================================================================
   LE SOUHAIT (écran 6) — l'appareil du joueur.

   Même colonne que le registre, et pour la même raison : c'est un écran de
   main, pas d'écran partagé. Le moment est même plus intime que la signature —
   on y dit qui l'on rêve d'être — et il n'a rien à gagner à s'étaler sous les
   yeux du voisin.

   Le champ est haut et vide. Pas de compteur de caractères, pas d'exemple en
   filigrane, pas de suggestion : une image proposée est une image imitée, et
   six joueurs à qui l'on souffle la même amorce rendraient six variations de
   la même personne. L'amorce se borne à « quelqu'un qui… », qui n'oriente rien.
   ========================================================================== */
.souhait-scene{
  display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(10px,1.2vw,18px);
  width:min(100%,38rem);text-align:left;
}
.souhait-scene .table-hail{text-align:left}
.souhait-voix{
  font-style:italic;font-size:clamp(16px,1.5vw,24px);line-height:1.45;
  color:var(--parch);text-wrap:pretty;text-shadow:0 2px 26px rgba(0,0,0,.9);
}
.souhait-form{display:flex;flex-direction:column;gap:clamp(8px,.9vw,14px)}
/* Même encre de saisie que le registre et que la porte Genèse : une seule
   langue de champ dans tout le jeu. Ce qui change ici est la hauteur — on ne
   décrit pas une personne sur une ligne. */
.souhait-form .field{
  width:100%;padding:.8em .9em;
  font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.1vw,18px);
  line-height:1.5;color:var(--parch);
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(20,12,4,.55));
  border:1px solid var(--border-gold);outline:none;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.souhait-form .field--long{min-height:clamp(112px,13vh,180px);resize:vertical}
.souhait-form .field::placeholder{color:var(--muted);opacity:1}
.souhait-form .field:focus{border-color:var(--gold);box-shadow:0 0 0 1px rgba(201,162,75,.25) inset}
.souhait-form .cta{align-self:flex-start;margin-top:.3em}
.souhait-note{font-style:italic;font-size:clamp(12px,.95vw,15px);line-height:1.55;
  color:var(--muted)}
/* Un souhait sur lequel le meneur a buté. Encre de sang, pas d'or : ce n'est
   pas une étape franchie, c'est ce qu'il faut reprendre. */
.souhait-reprise{
  font-style:italic;font-size:clamp(12px,.95vw,15px);line-height:1.55;
  color:var(--parch-soft);
  padding-left:clamp(10px,.9vw,16px);border-left:2px solid var(--blood-deep);
}

/* ==========================================================================
   LA RÉVÉLATION (écran 7) — quelqu'un paraît dans ta main.

   Colonne de main, comme le souhait dont c'est la suite immédiate.

   La carte est une ENLUMINURE, pas une fiche : une plaque d'encre profonde
   cernée d'or, l'initiale du personnage dessinée dedans, le nom en serif et la
   phrase qui le tient en italique. Pas de portrait — le moteur ne possède de
   cette personne que son nom, et une silhouette générique serait un visage
   inventé pour combler un trou. Le trou se voit mieux enluminé.

   Aucun chiffre, et le sceau de sang le dit au lieu de faire comme si la
   question ne se posait pas.
   ========================================================================== */
.naissance-scene{
  display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(10px,1.2vw,18px);
  width:min(100%,38rem);text-align:left;
}
.naissance-scene .table-hail{text-align:left}
.naissance-scene .forge{align-items:stretch;text-align:left}

.revelation{
  display:flex;align-items:stretch;gap:clamp(12px,1.4vw,22px);
  padding:clamp(12px,1.3vw,20px);
  background:linear-gradient(180deg,rgba(30,19,9,.86),rgba(12,8,4,.93));
  border:1px solid var(--border-gold);
  box-shadow:0 0 24px rgba(201,162,75,.13),0 16px 34px rgba(0,0,0,.62);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  animation:revele .9s cubic-bezier(.2,1,.3,1) both;
}
/* La montée d'or des choses qu'on apprend : la carte ne glisse pas d'un bord,
   elle se lève sur place — c'est une révélation, pas une notification. */
@keyframes revele{
  from{opacity:0;transform:translateY(10px) scale(.985);filter:brightness(.55)}
  to{opacity:1;transform:none;filter:none}
}
.revelation__plaque{
  position:relative;flex:none;
  width:clamp(84px,9vw,124px);
  display:flex;align-items:center;justify-content:center;
  /* Un halo, pas un disque : la lettre est ECLAIREE, elle n'est pas posee sur une
     pastille. Un bord franc ferait une vignette de catalogue la ou il faut une
     enluminure — et c'est la meme lumiere de bougie que le reste de la coque. */
  background:radial-gradient(58% 58% at 50% 42%,rgba(201,162,75,.17),rgba(58,44,24,.35) 55%,transparent 78%),
             linear-gradient(180deg,#2a2013,#171008);
  border:1px solid var(--border-gold);
}
.revelation__lettrine{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(46px,5.4vw,78px);line-height:1;
  color:var(--gold-bright);text-shadow:0 0 28px rgba(201,162,75,.42);
}
.revelation__dit{display:flex;flex-direction:column;gap:.45em;justify-content:center;min-width:0}
.revelation__nom{
  font-family:var(--serif);font-weight:600;line-height:1.05;
  font-size:clamp(26px,2.6vw,44px);color:var(--parch);
}
.revelation__concept{
  font-family:var(--serif);font-style:italic;line-height:1.45;
  font-size:clamp(14px,1.15vw,19px);color:var(--parch-dim);text-wrap:pretty;
}
/* Le sceau des chiffres. Rouge sang-de-boeuf : c'est la seule couleur de la
   charte qui dise « fermé » sans dire « raté ». */
.revelation__scelle{
  align-self:flex-start;margin-top:.25em;
  display:inline-flex;align-items:center;gap:.6em;
  padding:.4em 1em;border-radius:99px;
  border:1px solid rgba(184,64,47,.5);
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;
  font-size:clamp(8px,.62vw,11px);color:#e0a08a;
}
.revelation__gemme{flex:none;width:.55em;height:.55em;border-radius:50%;
  background:var(--blood);box-shadow:0 0 8px rgba(184,64,47,.7)}
/* Ce qu'il EST, dit en français — espèce, classe, historique. En capitales
   condensées sous le nom : c'est une mention, pas une seconde ligne de titre.
   Les mots se séparent d'un point médian posé en CSS, jamais d'une chaîne à
   traduire : cette ponctuation est du dessin, pas de la langue. */
.revelation__identite{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.7em;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.26em;
  font-size:clamp(8px,.62vw,11px);color:var(--gold-bright);
}
.revelation__identite span + span::before{
  content:"·";margin-right:.7em;color:var(--gold);opacity:.7;
}

/* ==========================================================================
   LE CORPS (écran 7) — ce que le personnage porte, APRÈS ce qu'il est.

   L'ordre est la règle : le nom, la phrase qui le tient, puis seulement ceci.
   Un très bon MJ campe quelqu'un ; il ne lit pas une feuille de calcul. Ce bloc
   se lit donc d'un coup d'œil et reste en encre seconde — trois jetons, six
   scores en grille, ce qu'on a en main.
   ========================================================================== */
.corps{
  display:flex;flex-direction:column;gap:clamp(9px,.9vw,15px);
  width:100%;text-align:left;
}
.corps__chiffres{display:flex;flex-wrap:wrap;gap:clamp(6px,.6vw,10px)}
.corps__jeton{
  display:inline-flex;align-items:baseline;gap:.5em;
  padding:.45em .9em;
  background:linear-gradient(180deg,rgba(30,19,9,.8),rgba(12,8,4,.9));
  border:1px solid var(--border-gold);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(8px,.6vw,10px);color:var(--parch-dim);
}
.corps__jeton b{
  font-family:var(--serif);font-weight:600;letter-spacing:0;
  font-size:clamp(17px,1.5vw,24px);color:var(--gold-bright);
}
/* Six scores, donc une grille qui tient en deux ou trois colonnes selon la main
   qui la lit. Jamais une ligne par score : la carte doublerait de hauteur. */
.corps__scores{
  list-style:none;display:grid;gap:clamp(4px,.45vw,8px);
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
}
.corps__scores li{
  display:flex;align-items:baseline;gap:.5em;
  padding:.3em 0;border-bottom:1px solid rgba(201,162,75,.14);
}
.corps__carac{
  flex:1;font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(8px,.6vw,10px);color:var(--muted);
}
.corps__score{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(14px,1.15vw,19px);color:var(--parch);
}
.corps__mod{
  font-family:var(--cond);font-size:clamp(9px,.7vw,12px);color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;
}
.corps__lbl{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.22em;
  font-size:clamp(8px,.62vw,11px);color:var(--gold);
}
/* Un sort préparé se compte comme une arme — un nom, et à sa droite ce qu'il
   coûte —, si bien que les deux partagent leur règle (L7.2). C'est la même
   discipline qu'en amont : une seule forme, plusieurs porteurs, jamais une
   deuxième copie qui prendrait sa propre route. */
.corps__armes,
.corps__prepares{list-style:none;display:flex;flex-direction:column;gap:.25em}
.corps__armes li,
.corps__prepares li{display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap}
.corps__arme,
.corps__sort{
  font-family:var(--serif);font-size:clamp(13px,1.05vw,17px);color:var(--parch);
}
.corps__dega,
.corps__rang{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(8px,.6vw,10px);color:var(--muted);
}
/* Ce qu'il sait faire. Quatre à six mots, donc une ligne qui court plutôt qu'une
   colonne : les armes se comptent une par une, les maîtrises se lisent d'un
   trait. Même filet d'or que les scores pour rester dans la même main.

   Les sorts mineurs (L7.2) se lisent exactement ainsi — trois noms courts qu'on
   parcourt d'un trait, jamais qu'on dénombre —, et ils sont donc dans la même
   règle plutôt que dans une copie qui dériverait au premier ajustement de la
   charte. Un lanceur ne demande pas un dialecte visuel à lui : il demande que
   ce qu'il porte se lise dans la langue de la carte. */
.corps__savoirs,
.corps__sorts{
  list-style:none;display:flex;flex-wrap:wrap;gap:.35em .9em;
}
.corps__savoirs li,
.corps__sorts li{
  font-family:var(--serif);font-size:clamp(12px,.95vw,16px);color:var(--parch);
}
.corps__savoirs li + li::before,
.corps__sorts li + li::before{
  content:"·";margin-right:.9em;color:var(--gold);opacity:.65;
}

/* ==========================================================================
   LA COMPAGNIE (écran 8) — les personnages paraissent à la place de leur joueur.

   Les cartes vivent dans le conteneur des sièges, et c'est voulu : un siège pris
   SANS personnage et un siège pris AVEC sont deux états de la même chose, pas
   deux listes. Elles arrivent par le même sondage de trois secondes, donc une à
   une, pendant que la tablée regarde.

   La colonne du sceau est étroite (26vw) et une table peut compter six convives :
   la carte est donc COUCHÉE — lettrine à gauche, nom et phrase à droite —, et les
   sièges s'empilent au lieu de s'aligner. Une carte-portrait debout, comme celle
   de la révélation, y entrerait à deux et se chevaucherait à quatre.

   Même enluminure que la révélation, en plus petit : ce que le joueur a vu dans
   sa main est ce que la table voit paraître, et pas une seconde représentation
   qui dériverait de la première.
   ========================================================================== */
/* Un siège par ligne : à deux mètres d'un écran de table, une colonne de lignes
   se lit, une grille de vignettes se devine. */
/* ⚠ `.ecard` est PRIS : `game.css` le donne aux cartes de casting portées de
   myLore, en `position:absolute` autour d'un portrait. Le siège d'un convive est
   un autre objet — il n'a pas de portrait, il vit dans la colonne des places, et
   il se range dans un flux. Réutiliser le nom en défaisant la moitié de ses règles
   aurait fait deux cartes sous une seule classe ; celle-ci a la sienne.
   Le défaut a été trouvé au navigateur : les cartes s'échappaient de leur colonne
   et se chevauchaient, ce qu'aucun cas de test ne pouvait voir. */
.sieges{flex-direction:column;align-items:stretch;gap:clamp(5px,.5vw,9px)}
.sieges .jchip{align-self:flex-start}

.convive{
  display:flex;flex-direction:column;gap:.25em;width:100%;
  animation:revele .9s cubic-bezier(.2,1,.3,1) both;
}
.convive__joue{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.22em;
  font-size:clamp(8px,.6vw,10px);color:var(--gold);
}
.convive__cadre{
  position:relative;display:flex;align-items:center;gap:clamp(8px,.8vw,14px);
  padding:clamp(6px,.6vw,10px) clamp(8px,.8vw,13px);
  background:linear-gradient(180deg,rgba(30,19,9,.86),rgba(12,8,4,.93));
  border:1px solid var(--border-gold);
  box-shadow:0 8px 22px rgba(0,0,0,.5);
}
.convive__cadre .cnr{width:clamp(7px,.6vw,11px);height:clamp(7px,.6vw,11px)}
.convive__cadre .cnr.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.convive__cadre .cnr.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.convive__lettrine{
  flex:none;width:clamp(34px,3vw,46px);text-align:center;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(28px,2.4vw,40px);line-height:1;
  color:var(--gold-bright);text-shadow:0 0 20px rgba(201,162,75,.4);
}
/* Ferré à gauche, contre le `text-align:center` de la colonne : une phrase
   italique de deux lignes centrée se lit en accordéon, et le nom doit s'aligner
   sur la lettrine qui le porte. */
.convive__dit{display:flex;flex-direction:column;gap:.15em;min-width:0;text-align:left}
.convive__nom{
  font-family:var(--serif);font-weight:600;line-height:1.1;
  font-size:clamp(15px,1.25vw,21px);color:var(--parch);
}
/* La phrase est bornée à deux lignes : ce qu'elle dit du personnage tient dans
   son début, et six convives dont la phrase court sur cinq lignes chasseraient le
   sceau hors de l'écran. La révélation, elle, la donne en entier. */
.convive__concept{
  font-family:var(--serif);font-style:italic;line-height:1.35;
  font-size:clamp(11px,.82vw,14px);color:var(--parch-dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* La puce `.jchip--moi` vivait ici : la porte du souhait, offerte dans la bande
   des sièges au seul compte qui regarde. Elle est partie avec le lien — cette
   bande est sur l'écran de table, qu'on regarde à plusieurs, et une question
   posée à une personne n'y a pas de destinataire lisible. Ce qui est à un joueur
   est sur son appareil (`Play::moi`), et l'écran de table porte la porte qui y
   mène, nommée comme telle. */

@media (max-width:860px){
  .revelation{flex-direction:column}
  /* La plaque prend toute la largeur : la lettrine doit grandir avec elle, sinon
     elle flotte au milieu d'un champ vide. Elle se mesure alors sur la largeur de
     l'ecran, comme la plaque elle-meme. */
  .revelation__plaque{width:100%;min-height:clamp(120px,22vh,180px)}
  .revelation__lettrine{font-size:clamp(64px,17vw,104px)}
}

@media (prefers-reduced-motion:reduce){
  /* Ce qui portait l'information était la personne, jamais sa montée en scène. */
  .revelation,.convive{animation:none}
  .jchip--moi{transition:none}
}