/* Direction artistique « Maison victorienne » [D-34] :
   papier peint damassé dans la nuit, cadres de laiton, cadran d'horloge.
   Vert spectral pour les Visiteurs, violet pour les pouvoirs, laiton pour les cadres et les actions.
   Grandes zones tactiles, lisible dans une pièce sombre. */

/* --- Polices hébergées dans le projet (le jeu fonctionne sans Internet) --- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("/fonts/cormorant-garamond.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500 600; font-display: swap; src: url("/fonts/cormorant-garamond-italique.woff2") format("woff2"); }
@font-face { font-family: "Cormorant SC"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/cormorant-sc.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/mulish.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/fonts/mulish-italique.woff2") format("woff2"); }

:root {
  --nuit: #0f1120;
  --nuit-claire: #171a2d;
  --nuit-plus-claire: #20243d;
  --bordure: #2e3252;
  --texte: #ebe6da;
  --texte-doux: #b7b1c9;
  --laiton: #b89655;
  --laiton-clair: #e2c98f;
  --laiton-voile: rgb(184 150 85 / 0.4);
  --vert: #7dffb3;
  --eclat: #ffffff; /* « blanc éclatant » : joueurs présents dans la même pièce (GDD § 12, valeur à confirmer) */
  --vert-clair: #aef9cf;
  --vert-sombre: #1f5c43;
  --violet: #c3a3ff;
  --danger: #f0a191;
  --camee: radial-gradient(circle at 50% 38%, #f4efe3, #cfc6ad); /* fond ivoire des portraits */

  --police-titre: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --police-capitales: "Cormorant SC", "Cormorant Garamond", Palatino, Georgia, serif;
  --police-texte: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --largeur-page: 34rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 18px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* pas de zoom au double appui */
}
/* Papier peint damassé, à peine visible, et un voile sombre sur les bords. */
body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% 0%, transparent 40%, rgb(0 0 0 / 0.45) 100%),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.016) 0 0.9rem, transparent 1rem) 0 0 / 3rem 3rem,
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.014) 0 0.35rem, transparent 0.45rem) 1.5rem 1.5rem / 3rem 3rem,
    linear-gradient(#141627, var(--nuit)) fixed;
  background-color: var(--nuit);
}

/* Mini-jeu en cours : la barre du haut laisse la place au jeu (son chrono est dans l'en-tête). */
body.en-minijeu .barre { display: none; }
body.en-minijeu :is(#ecran-minijeu, #ecran-fils, #ecran-boule) { padding-top: env(safe-area-inset-top, 0px); }

/* --- Barre du haut : lune, cadran d'horloge, son --- */
.barre {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  padding: calc(0.4rem + env(safe-area-inset-top, 0px)) 1rem 0.4rem;
  background: linear-gradient(rgb(15 17 32 / 0.95) 70%, transparent);
}
.barre-contenu {
  flex: 1;
  max-width: var(--largeur-page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 4rem;
}
.lune, .son {
  background: none;
  border: 0;
  padding: 0;
  color: var(--violet);
  min-width: 3rem;
  min-height: 3rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Le doigt posé sur la lune ne fait jamais défiler la page : rien n'annule l'appui long [D-224]. */
.lune { touch-action: none; position: relative; }
/* La lune appelle l'hôte [D-242] : elle bat (possession, cran gagné) jusqu'à ce qu'il l'ouvre. */
.lune.appel svg { animation: lune-appel 1.1s ease-in-out infinite; color: var(--violet); }
@keyframes lune-appel { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); filter: drop-shadow(0 0 16px rgb(195 163 255 / 1)); } 30% { transform: scale(1.05); } 45% { transform: scale(1.22); filter: drop-shadow(0 0 12px rgb(195 163 255 / 0.9)); } }
/* L'âme est prête [D-225, D-242] : la lune luit, chez l'hôte seul ; aucune étiquette (elle se lirait de loin). */
.lune.prete svg { animation: lune-prete 0.9s ease-in-out infinite; color: var(--violet); }
@keyframes lune-prete { 50% { filter: drop-shadow(0 0 20px rgb(195 163 255 / 1)) drop-shadow(0 0 6px #fff); transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .lune.appel svg, .lune.prete svg { animation-duration: 2.4s; } }
.lune svg { width: 2rem; height: 2rem; filter: drop-shadow(0 0 8px rgb(195 163 255 / 0.55)); }
.son { font-size: 1.3rem; color: var(--laiton-clair); }
.barre-droite { display: flex; gap: 0.6rem; align-items: center; }

.chrono {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--laiton);
  box-shadow: inset 0 0 0 3px var(--nuit), inset 0 0 0 4px var(--laiton-voile), 0 0 14px rgb(0 0 0 / 0.5);
  background: radial-gradient(circle, var(--nuit-claire), var(--nuit));
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  color: var(--vert-clair);
}
.chrono.urgent { color: var(--danger); border-color: var(--danger); }

/* --- Mise en page --- */
.page {
  max-width: var(--largeur-page);
  margin: 0 auto;
  padding: 0.5rem 1rem calc(6rem + env(safe-area-inset-bottom, 0px));
}
.ecran { display: grid; gap: 1.25rem; }
.pile { display: grid; gap: 1rem; }
.centre { text-align: center; }
.entete { text-align: center; }

.titre {
  margin: 0;
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.05;
  color: var(--laiton-clair);
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 0 18px rgb(226 201 143 / 0.25);
}
.titre.petit { font-size: 2.1rem; }
.accroche { margin: 0.6rem 0 0; color: var(--texte-doux); font-family: var(--police-titre); font-style: italic; font-size: 1.2rem; }
.recit { margin: 0; font-family: var(--police-titre); font-size: 1.35rem; font-style: italic; text-align: center; color: var(--texte-doux); text-wrap: balance; }

/* Cadre de laiton : un filet extérieur et un filet intérieur plus discret. */
.carte {
  margin: 0;
  background: rgb(23 26 45 / 0.86);
  border: 1px solid var(--laiton);
  border-radius: 0.2rem;
  box-shadow: inset 0 0 0 4px var(--nuit-claire), inset 0 0 0 5px var(--laiton-voile), 0 10px 30px rgb(0 0 0 / 0.35);
  padding: 1.1rem 1.25rem;
}
.etiquette {
  margin: 0 0 0.35rem;
  padding: 0;
  font-family: var(--police-capitales);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.16em;
  color: var(--laiton-clair);
}
.discret { color: var(--texte-doux); margin: 0; }
.lieu-nom {
  margin: 0;
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.05;
  color: var(--vert-clair);
}
.lieu-nom.danger { color: var(--danger); }

/* --- Formulaires et boutons (au moins 48 px de haut) --- */
.champ { display: grid; gap: 0.3rem; border: 0; margin: 0; padding: 0; }
input {
  font: inherit;
  color: var(--texte);
  background: var(--nuit);
  border: 1px solid var(--laiton-voile);
  border-radius: 0.2rem;
  padding: 0.75rem 1rem;
  min-height: 3rem;
}
input:focus { outline: 2px solid var(--laiton-clair); outline-offset: 1px; }

.bouton {
  display: block;
  width: 100%;
  font-family: var(--police-capitales);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  color: #12131f;
  background: linear-gradient(var(--laiton-clair), var(--laiton));
  border: 1px solid #f0dcaa;
  border-radius: 0.2rem;
  padding: 0.75rem 1.25rem;
  min-height: 3.25rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.35);
}
.bouton:disabled { opacity: 0.4; cursor: default; }
.bouton.secondaire { background: transparent; color: var(--laiton-clair); border-color: var(--laiton-voile); box-shadow: none; }
.bouton.pouvoir { background: linear-gradient(#d9c4ff, var(--violet)); border-color: #e6d9ff; }
.discret-bouton { background: transparent; border-color: transparent; box-shadow: none; color: var(--texte-doux); font-family: var(--police-texte); font-size: 1rem; letter-spacing: 0; font-weight: 400; }
.erreur { margin: 0; color: var(--danger); }

/* --- Portraits : médaillons ovales --- */
.portraits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.portrait {
  position: relative;
  font-size: 1.9rem;
  aspect-ratio: 5 / 6;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--laiton-voile);
  background: var(--camee);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.8;
}
.portrait img { width: 78%; pointer-events: none; }
.portrait:has(input:checked) {
  border-color: var(--laiton-clair);
  opacity: 1;
  box-shadow: 0 0 0 3px var(--nuit-claire), 0 0 0 4px var(--laiton), 0 0 16px rgb(226 201 143 / 0.35);
}
.portrait input { position: absolute; opacity: 0; pointer-events: none; }
.portrait.pris { opacity: 0.2; cursor: not-allowed; filter: grayscale(1); }

.medaillon {
  flex-shrink: 0;
  width: 2.3rem;
  height: 2.75rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 1.25rem;
  border: 2px solid var(--laiton);
  background: var(--camee);
  overflow: hidden;
}
.medaillon img, .joueurs .symbole img { width: 80%; }
/* Photo du joueur [D-108] : elle remplit tout le camée. */
img.photo, .medaillon img.photo, .joueurs .symbole img.photo, .portrait img.photo { width: 100%; height: 100%; object-fit: cover; }
.portrait-photo { grid-column: span 2; grid-row: span 2; display: grid; place-content: center; justify-items: center; gap: 0.2rem; font-size: 2.4rem; color: var(--nuit); }
.portrait-photo small { font: 600 0.8rem var(--police-capitales); letter-spacing: 0.08em; color: #4a3f2a; }
/* Le champ photo couvre la case et doit recevoir le toucher (sinon la caméra ne s'ouvre pas). */
.portrait-photo input[type="file"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; pointer-events: auto; }

/* --- Listes de joueurs --- */
.joueurs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.joueurs li { display: flex; align-items: center; gap: 0.8rem; }
.joueurs .symbole { flex-shrink: 0; width: 2.3rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--laiton); background: var(--camee); overflow: hidden; }
.joueurs .moi { color: var(--vert-clair); font-weight: 600; }
.joueurs .role { margin-left: auto; font-family: var(--police-titre); font-style: italic; font-size: 1.1rem; color: var(--texte-doux); }
.joueurs .role.envoutes { color: var(--violet); }
.joueurs .role.pret { color: var(--vert-clair); font-size: 1rem; } /* « ✓ prêt » en salle d'attente [D-124] */
/* Indices des cachettes des autres [D-124] */
.indices-cachettes summary { cursor: pointer; list-style-position: inside; }
.indices-liste { margin: 0.6rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; font-style: italic; color: var(--texte-doux); }

/* --- Carte du rôle : visible uniquement tant que le doigt reste posé --- */
.carte-role {
  font: inherit;
  color: var(--texte);
  min-height: 16rem;
  border-radius: 50% / 16%;
  border: 1px solid var(--laiton);
  box-shadow: inset 0 0 0 5px var(--nuit-claire), inset 0 0 0 6px var(--laiton-voile);
  background: radial-gradient(ellipse at 50% 40%, var(--nuit-plus-claire), var(--nuit-claire));
  padding: 1.75rem;
  display: grid;
  place-items: center;
  text-align: center;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.carte-role .role-visible { display: none; }
.carte-role.revele .role-cache { display: none; }
.carte-role.revele .role-visible { display: grid; gap: 0.75rem; }
.role-cache { color: var(--laiton-clair); font-family: var(--police-titre); font-style: italic; font-size: 1.35rem; }
.souris { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tactile { display: none; }
  .souris { display: inline; }
}
.role-titre { font-family: var(--police-titre); font-style: italic; font-weight: 600; font-size: 2.4rem; line-height: 1; color: var(--vert-clair); }
.role-titre.envoutes { color: var(--violet); }
.role-allies { color: var(--texte-doux); min-height: 3em; }

/* --- Jauge de progression : segments, comme une rangée de voyants --- */
.barre-progression {
  height: 0.8rem;
  background: #2f3456;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(5% - 3px), transparent calc(5% - 3px) 5%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(5% - 3px), transparent calc(5% - 3px) 5%);
}
.progression-remplie {
  height: 100%;
  width: 0;
  background: linear-gradient(var(--vert-clair), #6fe9a4);
  box-shadow: 0 0 8px rgb(125 255 179 / 0.4);
  transition: width 0.6s ease;
}

.badge { font-size: 0.75rem; padding: 0.1rem 0.55rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; align-self: center; font-weight: 600; }
.badge.danger { color: var(--danger); }
.badge.special { color: var(--laiton-clair); }

/* --- Message éphémère --- */
.message {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  margin: 0 auto;
  max-width: 32rem;
  padding: 0.9rem 1.2rem;
  border-radius: 0.2rem;
  background: var(--nuit-plus-claire);
  border: 1px solid var(--laiton);
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.55);
}
.message.erreur { border-color: var(--danger); color: var(--danger); }

/* --- Missions et mini-jeux --- */
.conseil { margin: 0; padding: 0.6rem 0.9rem; background: var(--nuit); border-left: 2px solid var(--violet); color: var(--texte); font-size: 0.95rem; }
.conseil.danger { border-left-color: var(--danger); font-style: italic; }
.regles { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.55rem; }
.regles li::marker { font-family: var(--police-titre); font-weight: 600; color: var(--laiton-clair); }
.case-compris { display: flex; align-items: center; gap: 0.6rem; min-height: 3rem; font-weight: 700; cursor: pointer; }
.case-compris input { width: 1.5rem; height: 1.5rem; min-height: 0; accent-color: var(--laiton); }
.entete-minijeu { display: grid; gap: 0.6rem; text-align: center; }
.chrono-minijeu { -webkit-mask: none; mask: none; height: 0.5rem; border-radius: 999px; }
.chrono-minijeu .progression-remplie { transition: width 0.25s linear; background: linear-gradient(90deg, var(--danger), var(--laiton-clair), var(--vert)); box-shadow: none; }
.zone-minijeu {
  min-height: 60vh;
  display: grid;
  place-items: center;
  border-radius: 0.2rem;
  background: var(--nuit-claire);
  border: 1px solid var(--laiton);
  box-shadow: inset 0 0 0 4px var(--nuit-claire), inset 0 0 0 5px var(--laiton-voile);
  padding: 1rem;
  touch-action: pan-y; /* Les scènes à glisser gardent leur propre touch-action: none. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.provisoire { display: grid; gap: 1rem; text-align: center; max-width: 24rem; }

/* --- Mode debug (volontairement hors du style du jeu) --- */
.debug {
  position: fixed;
  right: 0.5rem;
  bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 15;
  max-width: min(22rem, calc(100vw - 1rem));
  max-height: 70vh;
  overflow: auto;
  background: #2a1f00;
  border: 1px solid #a07a00;
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}
.debug summary { cursor: pointer; color: #ffd166; font-weight: 700; font-size: 1rem; padding: 0.4rem 0.3rem; min-height: 2.75rem; display: flex; align-items: center; gap: 0.3rem; }
.debug:not(:has(details[open])) { box-shadow: 0 0 18px rgb(255 209 102 / 0.35); }
.debug details[open] { display: grid; gap: 0.5rem; }
.debug .zone-debug { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.debug .zone-debug p { flex-basis: 100%; margin: 0.3rem 0 0; color: #ffd166; }
.debug button { font: inherit; background: var(--nuit); color: var(--texte); border: 1px solid #a07a00; border-radius: 0.5rem; padding: 0.35rem 0.6rem; cursor: pointer; }
.debug .bouton { font-family: var(--police-texte); font-size: 0.85rem; letter-spacing: 0; min-height: 0; padding: 0.5rem; }

/* === Responsive : téléphone (par défaut), tablette, ordinateur [D-33] === */

.colonne { min-width: 0; }

/* Téléphone en paysage : on gagne de la hauteur. */
@media (max-height: 30rem) and (orientation: landscape) {
  .barre { position: static; }
  .carte-role { min-height: 11rem; }
  .titre { font-size: 2rem; }
}

/* Tablette et plus : deux colonnes pour le jeu, plus d'air partout. */
@media (min-width: 48rem) {
  :root { --largeur-page: 60rem; }
  html, body { font-size: 19px; }
  .page { padding-inline: 2rem; }
  #ecran-accueil, #ecran-attente, #ecran-trop-tard, #ecran-role, #ecran-fin,
  #ecran-briefing, #ecran-partenaire, #ecran-minijeu {
    max-width: 36rem;
    margin-inline: auto;
    width: 100%;
  }
  .portraits { grid-template-columns: repeat(6, 1fr); }
  .carte-role { min-height: 20rem; }
  .deux-colonnes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .deux-colonnes > .colonne:first-child { position: sticky; top: 6rem; }
  .debug { max-width: 26rem; }
}
/* Le panneau debug ne doit pas masquer les boutons du bas sur téléphone. */
@media (max-width: 47.99rem) {
  .page { padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); }
}

/* Ordinateur : survol à la souris, contenu plus large. */
@media (min-width: 64rem) {
  :root { --largeur-page: 72rem; }
  .deux-colonnes { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

@media (hover: hover) and (pointer: fine) {
  .bouton:not(:disabled):hover { filter: brightness(1.1); }
  .portrait:hover { border-color: var(--laiton); }
  .lune:hover, .son:hover { filter: brightness(1.25); }
}

:focus-visible { outline: 2px solid var(--laiton-clair); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

#mission-detail { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.3rem; }

/* === Ambiance [D-35] : brume, teinte par étage, Heure maudite, transitions === */

/* Le contenu passe au-dessus des calques d'ambiance. */
.page { position: relative; z-index: 1; }
/* La barre (lune, chrono) reste au-dessus de tout, même de l'écran noir d'une coupure. */
.barre { position: sticky; z-index: 10; }

/* Brume : deux voiles qui dérivent lentement, en sens contraires. */
.brume {
  position: fixed;
  inset: -20% -50%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--brume-opacite, 0.5);
  transition: opacity 2s ease;
  background:
    radial-gradient(ellipse 30% 18% at 20% 70%, rgb(200 205 230 / 0.12), transparent 70%),
    radial-gradient(ellipse 25% 14% at 60% 85%, rgb(200 205 230 / 0.1), transparent 70%),
    radial-gradient(ellipse 35% 20% at 85% 60%, rgb(200 205 230 / 0.09), transparent 70%);
  animation: derive 70s linear infinite alternate;
}
.brume.lointaine {
  opacity: calc(var(--brume-opacite, 0.5) * 0.8);
  background:
    radial-gradient(ellipse 28% 16% at 35% 30%, rgb(200 205 230 / 0.09), transparent 70%),
    radial-gradient(ellipse 32% 18% at 75% 40%, rgb(200 205 230 / 0.08), transparent 70%);
  animation-duration: 95s;
  animation-direction: alternate-reverse;
}
@keyframes derive {
  from { transform: translateX(-12%); }
  to { transform: translateX(12%); }
}

/* Teinte selon l'étage où l'on se trouve : profondeurs (sous le niveau de départ),
   hauteurs (au-dessus). Le niveau de départ garde la teinte de base. */
.teinte {
  position: fixed;
  inset: 0;
  z-index: 5; /* par-dessus le contenu, mais seulement sur les bords */
  pointer-events: none;
  background: var(--teinte, transparent);
  transition: background 2.5s ease;
}
body[data-etage="profondeurs"] { --teinte: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 50%, rgb(110 40 40 / 0.38) 100%); --brume-opacite: 0.7; }
body[data-etage="hauteurs"] { --teinte: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 50%, rgb(110 80 200 / 0.3) 100%); }
/* Salle danger : la brume s'épaissit. */
body[data-danger="1"] { --brume-opacite: 0.95; }

/* Heure maudite : bords rougeoyants, le cadran bat comme un cœur. */
.maudite {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 3s ease;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 40%, rgb(150 20 35 / 0.5) 100%);
}
body[data-acte="heureMaudite"] .maudite { opacity: 1; animation: souffle 6s ease-in-out infinite; }
body[data-acte="heureMaudite"] .chrono { color: var(--danger); border-color: var(--danger); animation: battement 1.1s ease-in-out infinite; }
@keyframes souffle { 50% { opacity: 0.6; } }
@keyframes battement {
  0%, 60%, 100% { transform: scale(1); box-shadow: inset 0 0 0 3px var(--nuit), inset 0 0 0 4px var(--laiton-voile), 0 0 10px rgb(240 161 145 / 0.2); }
  15% { transform: scale(1.07); box-shadow: inset 0 0 0 3px var(--nuit), inset 0 0 0 4px var(--laiton-voile), 0 0 22px rgb(240 161 145 / 0.55); }
  30% { transform: scale(1.02); }
  45% { transform: scale(1.06); }
}

/* Transition entre écrans : un fondu, comme une bougie qu'on rallume. */
.ecran { animation: apparition 0.5s ease both; }
@keyframes apparition {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Page d'essai des mini-jeux (mode debug) */
.liste-essai { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

/* --- Salle de contrôle : la vision [D-13] --- */

#ecran-vision .carte { animation: apparition-vision 0.8s ease both; }
@keyframes apparition-vision { from { filter: blur(8px) brightness(1.6); opacity: 0; } to { filter: none; opacity: 1; } }

/* === Carte de la maison en coupe, comme une maison de poupée [D-39] === */
.maison-carte { display: grid; padding-top: 0.2rem; }
/* Le toit, sa cheminée et son œil-de-bœuf */
.toit {
  position: relative;
  height: 4.2rem;
  margin: 0 -4%;
  background:
    repeating-linear-gradient(0deg, transparent 0 0.55rem, rgb(0 0 0 / 0.35) 0.55rem 0.62rem),
    linear-gradient(#3a2a4a, #241a33);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cheminee {
  position: absolute;
  right: 24%;
  top: 0.9rem;
  width: 1.2rem;
  height: 2rem;
  background: #2a1a24;
  box-shadow: inset 0 0.25rem 0 #4a2f3a;
}
.oeil-de-boeuf {
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  width: 1.3rem;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  border: 2px solid var(--laiton);
  background: radial-gradient(circle, #f2b35b 0 30%, #3b2a14 70%);
  box-shadow: 0 0 10px rgb(242 179 91 / 0.5);
}
/* Un étage : son nom au-dessus, ses pièces côte à côte */
.niveau {
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding: 0.35rem 0.35rem 0.4rem;
  border-inline: 3px solid #2a1f14;
  border-bottom: 5px solid #3a2616;
  background:
    radial-gradient(circle at 50% 50%, rgb(195 163 255 / 0.07) 0 20%, transparent 21%) 0 0 / 1.2rem 1.4rem,
    linear-gradient(#211a36, #1a1530);
}
.niveau.hauteurs { background: radial-gradient(circle at 50% 50%, rgb(195 163 255 / 0.09) 0 20%, transparent 21%) 0 0 / 1.2rem 1.4rem, linear-gradient(#2a1f45, #211a3a); }
.niveau.profondeurs {
  border-color: #1a1814;
  background:
    repeating-linear-gradient(0deg, transparent 0 1rem, rgb(0 0 0 / 0.3) 1rem calc(1rem + 2px)),
    repeating-linear-gradient(90deg, transparent 0 1.6rem, rgb(0 0 0 / 0.22) 1.6rem calc(1.6rem + 2px)),
    linear-gradient(#302b36, #1f1b24);
}
.niveau-nom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-family: var(--police-capitales);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--laiton-clair);
}
.pieces { display: grid; grid-template-columns: repeat(var(--nb, 4), minmax(0, 1fr)); gap: 0.25rem; }
.piece-carte {
  position: relative;
  min-height: 4.2rem;
  padding: 0.35rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  text-align: center;
  background: rgb(15 17 32 / 0.55);
  border: 1px solid rgb(184 150 85 / 0.25);
  border-radius: 0.15rem;
}
.piece-nom {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--texte);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
}
.piece-role {
  font-family: var(--police-capitales);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--laiton-clair);
}
.piece-carte.danger { background: rgb(90 25 30 / 0.4); border-color: rgb(240 161 145 / 0.45); }
/* La pièce de la mission : elle brille */
.piece-carte.cible {
  background: radial-gradient(circle at 50% 40%, rgb(125 255 179 / 0.35), rgb(31 92 67 / 0.55));
  border: 2px solid var(--vert);
  box-shadow: 0 0 14px rgb(125 255 179 / 0.45);
  animation: appel 2.4s ease-in-out infinite;
}
.piece-carte.cible .piece-nom { color: #f4fff9; }
@keyframes appel { 50% { box-shadow: 0 0 22px 3px rgb(125 255 179 / 0.6); } }
/* La pièce où l'on se trouve : une petite flamme */
.piece-carte.ici::after {
  content: "";
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 0.55rem;
  height: 0.8rem;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 70%, #fffbe8 0 20%, #f2b35b 55%, transparent 72%);
  filter: drop-shadow(0 0 4px #f2b35b);
}
/* Vers la mission [D-250] : pastilles « Tu es ici » / « Ta mission », flèche sur l'étage à rejoindre */
.pastille-plan { align-self: center; margin-top: 0.15rem; padding: 0.05rem 0.4rem; border-radius: 0.2rem; font-family: var(--police-capitales); font-size: 0.62rem; letter-spacing: 0.06em; white-space: nowrap; }
.pastille-plan.mission { color: #0f2a1d; background: linear-gradient(#b8ffd8, #6fe0a5); }
.pastille-plan.ici { color: #2a1a06; background: linear-gradient(#ffe1a3, #f2b35b); }
.fleche-etage { padding: 0.05rem 0.45rem; border-radius: 0.2rem; font-size: 0.75rem; letter-spacing: 0.06em; color: #0f2a1d; background: linear-gradient(#b8ffd8, #6fe0a5); animation: fleche-etage 1.4s ease-in-out infinite; }
@keyframes fleche-etage { 50% { transform: translateY(-2px); box-shadow: 0 0 10px rgb(125 255 179 / 0.6); } }
.chemin-mission { margin: 0; padding: 0.55rem 0.75rem; border-left: 3px solid var(--vert, #7dffb3); background: rgb(125 255 179 / 0.07); color: var(--texte); line-height: 1.45; }
.indication-mission { margin: 0; font-style: italic; color: var(--laiton-clair); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .fleche-etage { animation: none; } }
/* Pièce exclue : condamnée par des planches */
.piece-carte.condamnee {
  background:
    linear-gradient(35deg, transparent 44%, #4a3120 44% 56%, transparent 56%),
    linear-gradient(-35deg, transparent 44%, #3a2616 44% 56%, transparent 56%),
    rgb(10 8 14 / 0.8);
  border-color: transparent;
}
.piece-carte.condamnee .piece-nom { color: var(--texte-doux); opacity: 0.6; text-decoration: line-through; }
.ligne-de-terre {
  height: 0.55rem;
  margin: 0 -4%;
  background: linear-gradient(#2d4a2a 0 40%, #3a2a1a 40%);
  border-radius: 0.2rem;
}
/* Âmes dans les pièces (vision de la salle de contrôle) */
.piece-ames { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem; }
.ame-vue { display: inline-grid; justify-items: center; gap: 0.05rem; }
.ame-vue .medaillon { width: 1.5rem; height: 1.8rem; border-width: 1.5px; }
.ame-nom { font-size: 0.6rem; font-weight: 700; color: var(--texte); max-width: 3.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.niveau-nom .ame-vue .medaillon { width: 1.3rem; height: 1.55rem; }
/* Téléphone : au-delà de 3 pièces, l'étage passe sur deux rangées plutôt que d'écraser les noms. */
@media (max-width: 47.99rem) {
  .pieces { grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr)); }
  .piece-nom { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
}
@media (min-width: 48rem) {
  .piece-carte { min-height: 5rem; }
  .piece-nom { font-size: 0.8rem; }
}

/* === La lune : menu des pouvoirs, écran de l'envoûté [étape 9] === */
.voile-lune {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 1rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgb(8 6 16 / 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.feuille-lune {
  width: min(100%, 30rem);
  max-height: 88vh;
  overflow: auto;
  display: grid;
  gap: 0.9rem;
  padding: 1.2rem 1.1rem;
  background: linear-gradient(#1c1734, #120f24);
  border: 1px solid var(--violet);
  border-radius: 0.3rem;
  box-shadow: 0 0 40px rgb(195 163 255 / 0.25), inset 0 0 0 4px #1c1734, inset 0 0 0 5px rgb(195 163 255 / 0.3);
  animation: monte 0.3s ease both;
}
.tete-lune { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tete-lune .titre { margin: 0; }
.fermer-lune-haut { flex: none; min-width: 2.8rem; min-height: 2.8rem; font-size: 1.3rem; color: var(--texte-doux); background: none; border: 1px solid var(--bordure); border-radius: 50%; cursor: pointer; }
#fermer-lune { position: sticky; bottom: 0; background: #16122a; box-shadow: 0 -0.6rem 0.8rem #120f24; }
@keyframes monte { from { transform: translateY(20%); opacity: 0; } }
.carte-role.mini { min-height: 5.5rem; padding: 0.9rem; border-radius: 50% / 30%; }
.carte-role.mini .role-titre { font-size: 1.7rem; }
.pouvoirs { display: grid; gap: 0.6rem; }
.pouvoir { padding: 0.8rem 0.9rem; border: 1px solid var(--laiton-voile); border-radius: 0.2rem; background: rgb(15 17 32 / 0.6); display: grid; gap: 0.4rem; }
.pouvoir h3 { margin: 0; font-family: var(--police-titre); font-style: italic; font-size: 1.35rem; color: var(--laiton-clair); }
.pouvoir p { margin: 0; color: var(--texte-doux); font-size: 0.95rem; }
.pouvoir.sombre { border-color: rgb(195 163 255 / 0.45); }
.pouvoir.sombre h3 { color: var(--violet); }
.pouvoir.indisponible { opacity: 0.55; }
.ames-presentes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ame-presente {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem 0.35rem 0.35rem;
  font: inherit;
  font-weight: 700;
  color: var(--texte);
  background: var(--nuit);
  border: 1px solid var(--violet);
  border-radius: 999px;
  cursor: pointer;
}
.ame-presente.ici { color: var(--eclat); border-color: var(--eclat); box-shadow: 0 0 10px rgb(255 255 255 / 0.45); text-shadow: 0 0 6px rgb(255 255 255 / 0.6); }
.ame-presente.absente { opacity: 0.35; filter: grayscale(1); cursor: default; border-color: var(--bordure); }
.geste-envoutement { margin: 0; padding: 0.8rem; font-size: 1.15rem; font-weight: 700; line-height: 1.4; color: var(--eclat); border: 1px dashed var(--violet); border-radius: 0.2rem; background: rgb(195 163 255 / 0.08); }
.confirmation { display: grid; gap: 0.5rem; padding-top: 0.3rem; }
.confirmation p { color: var(--texte); font-weight: 700; }

.voile-envoute {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1.5rem max(1rem, 6vw);
  background: radial-gradient(circle at 50% 35%, #3a1d5c, #0b0816 75%);
  animation: prise 1.2s ease both;
}
.voile-envoute > section { max-width: 28rem; }
.voile-envoute .titre { color: var(--violet); text-shadow: 0 0 22px rgb(195 163 255 / 0.6); }
.lune-envoute { margin: 0; font-size: 4rem; line-height: 1; color: var(--violet); text-shadow: 0 0 30px var(--violet); animation: battement-lune 2.4s ease-in-out infinite; }
@keyframes prise { from { opacity: 0; filter: blur(12px); } }
/* Le compteur des esprits [D-247] : un vieux détecteur, cadran vert-de-gris et aiguille qui tremble. */
.voile-geiger { position: fixed; inset: 0; z-index: 38; overflow-y: auto; padding: max(1rem, env(safe-area-inset-top)) max(1rem, 5vw) 1.5rem; background: radial-gradient(circle at 50% 20%, #1d2a1c, #0a0e0a 75%); }
.voile-geiger > section { max-width: 30rem; margin-inline: auto; }
.voile-geiger .titre { color: #bfe6b0; text-shadow: 0 0 18px rgb(127 209 139 / 0.45); }
.geiger-cadran { display: grid; justify-items: center; gap: 0.3rem; padding: 0.8rem; border: 2px solid var(--laiton, #b89655); border-radius: 1rem 1rem 0.5rem 0.5rem; background: linear-gradient(#16201a, #0d130f); box-shadow: inset 0 0 18px rgb(0 0 0 / 0.7); }
.geiger-cadran svg { width: min(16rem, 80vw); height: auto; }
.geiger-aiguille { transform-origin: 100px 110px; transform: rotate(var(--angle, -70deg)); animation: geiger-tremble 0.35s steps(2) infinite; transition: transform 1.2s cubic-bezier(.3,1.6,.5,1); }
@keyframes geiger-tremble { 50% { translate: 0.6px 0; } }
.geiger-total { margin: 0; font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.08em; color: #bfe6b0; }
.geiger-pieces { display: grid; gap: 0.5rem; }
.geiger-piece { border: 1px solid rgb(127 209 139 / 0.3); border-radius: 0.6rem; background: rgb(10 20 12 / 0.6); }
.geiger-piece summary { display: grid; grid-template-columns: minmax(0, 1fr) 5rem auto; align-items: center; gap: 0.6rem; padding: 0.7rem 0.8rem; cursor: pointer; list-style: none; }
.geiger-piece summary::-webkit-details-marker { display: none; }
.geiger-nom { font-weight: 700; color: var(--texte); }
.geiger-barre { height: 0.5rem; border-radius: 1rem; background: linear-gradient(90deg, #7fd18b var(--part), rgb(127 209 139 / 0.12) var(--part)); }
.geiger-nombre { font-family: ui-monospace, Menlo, monospace; color: #bfe6b0; }
.geiger-messages { margin: 0; padding: 0 0.8rem 0.8rem 1.2rem; display: grid; gap: 0.5rem; }
.geiger-messages li { display: grid; gap: 0.1rem; line-height: 1.4; color: var(--texte-doux); }
.geiger-messages strong { color: var(--texte); }
.geiger-heure { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; color: #7fd18b; }
@media (prefers-reduced-motion: reduce) { .geiger-aiguille { animation: none; } }
/* La lanterne bénie, unique [D-243] : un grand moment doré, chez son seul porteur. */
.voile-lanterne {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, 6vw) 1.5rem;
  background: radial-gradient(circle at 50% 30%, #4a3512, #120d06 72%);
  animation: prise 1.2s ease both;
}
.voile-lanterne > section { max-width: 28rem; }
.voile-lanterne .titre { color: #ffe39a; text-shadow: 0 0 24px rgb(255 211 107 / 0.75); }
.voile-lanterne .recit { color: #f1dfb5; }
.lanterne-dessin { display: block; margin-inline: auto; overflow: visible; width: min(11rem, 42vw); height: auto; filter: drop-shadow(0 0 28px rgb(255 200 90 / 0.65)); animation: lanterne-arrivee 1.6s cubic-bezier(.2,.8,.2,1) both; }
.lanterne-lueur { transform-origin: 60px 98px; animation: lanterne-lueur 2.2s ease-in-out infinite; }
.lanterne-flamme { transform-origin: 60px 106px; animation: lanterne-flamme 0.9s ease-in-out infinite alternate; }
@keyframes lanterne-arrivee { from { opacity: 0; transform: translateY(1.5rem) scale(0.8); } }
@keyframes lanterne-lueur { 50% { opacity: 0.6; transform: scale(1.08); } }
@keyframes lanterne-flamme { to { transform: scaleY(1.12) scaleX(0.92) rotate(2deg); } }
.lanterne-pouvoir { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; text-align: left; color: var(--texte); line-height: 1.45; }
.lanterne-pouvoir strong { color: #ffe39a; }
.lanterne-bouton { background: linear-gradient(180deg, #ffd36b, #c99632); color: #2a1c05; font-weight: 700; box-shadow: 0 0 22px rgb(255 211 107 / 0.55); }
.pouvoir.lanterne-tete { border-color: #e6c77a; box-shadow: 0 0 18px rgb(255 211 107 / 0.35); }
.pouvoir.lanterne-tete h3 { color: #ffe39a; }
@media (prefers-reduced-motion: reduce) { .lanterne-dessin, .lanterne-lueur, .lanterne-flamme { animation: none; } }
@keyframes battement-lune { 50% { transform: scale(1.12); } }
.allies-envoute { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin: 0; }
.allie { display: grid; justify-items: center; gap: 0.2rem; font-weight: 700; }

/* === Scanner de QR codes intégré [D-19] === */
.voile-scanner {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  gap: 1rem;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background: #05040a;
}
.voile-scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viseur { position: relative; align-self: center; width: min(70vw, 18rem); aspect-ratio: 1; box-shadow: 0 0 0 100vmax rgb(5 4 10 / 0.55); border-radius: 0.5rem; }
.viseur i { position: absolute; width: 18%; height: 18%; border: 4px solid var(--laiton-clair); }
.viseur i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.viseur i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.viseur i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.viseur i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.scanner-texte { position: relative; margin: 0; max-width: 26rem; text-align: center; font-family: var(--police-titre); font-style: italic; font-size: 1.25rem; color: var(--laiton-clair); text-shadow: 0 1px 6px #000; }
.scanner-texte.erreur { color: var(--danger); }
.voile-scanner .bouton { position: relative; max-width: 20rem; }
.voile-scanner.sans-camera .viseur { opacity: 0.25; }

/* === Événements de la maison (V2) === */
.annonce {
  position: fixed;
  left: 50%;
  top: calc(4.8rem + env(safe-area-inset-top, 0px));
  z-index: 32;
  width: min(calc(100% - 2rem), 30rem);
  translate: -50% 0;
  padding: 1rem 1.2rem;
  text-align: center;
  background: linear-gradient(#241c3c, #16122a);
  border: 1px solid var(--violet);
  border-radius: 0.3rem;
  box-shadow: 0 0 30px rgb(195 163 255 / 0.35), 0 14px 30px rgb(0 0 0 / 0.6);
  animation: annonce 0.5s ease both;
  cursor: pointer;
}
.annonce[data-kind="coupure"], .annonce[data-kind="apparition"], .annonce[data-kind="apparition-ratee"] { border-color: var(--danger); box-shadow: 0 0 30px rgb(240 161 145 / 0.35); }
.annonce[data-kind="accalmie"], .annonce[data-kind="courant-retabli"], .annonce[data-kind="apparition-reussie"] { border-color: var(--vert); box-shadow: 0 0 30px rgb(125 255 179 / 0.3); }
@keyframes annonce { from { opacity: 0; translate: -50% -30%; filter: blur(6px); } }
.annonce-titre { margin: 0; font-family: var(--police-titre); font-style: italic; font-weight: 600; font-size: 1.6rem; color: var(--laiton-clair); }
.annonce-texte { margin: 0.3rem 0 0; color: var(--texte); }

/* En plein mini-jeu, annonces et messages laissent passer les doigts : rien ne fait rater le jeu [D-228]. */
body.en-minijeu .annonce, body.en-minijeu .message { pointer-events: none; }
.annonce-fermer { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--texte-doux); }
.annonces-liste { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; font-size: 0.9rem; color: var(--texte-doux); }
.annonces-liste strong { color: var(--laiton-clair); }

/* Pause de l'organisateur [D-227] : par-dessus tout, sauf le bouton 🐞 et les messages */
.voile-pause { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 0.8rem; padding: 2rem 1.5rem; text-align: center; background: rgb(8 6 16 / 0.94); }
.voile-pause p { max-width: 26rem; margin: 0; color: var(--texte-doux); }
.voile-pause .pause-icone { font-size: 3rem; color: var(--laiton-clair); }
body.en-minijeu .voile-pause { display: none; }

/* Coupure : tout devient noir, sauf la barre (lune, chrono) et les secours */
.voile-coupure {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 6rem 1.5rem 2rem;
  text-align: center;
  background: #020104;
  animation: noir 0.4s steps(3) both;
}
@keyframes noir { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: 0.2; } 100% { opacity: 1; } }
.coupure-titre { margin: 0; font-family: var(--police-titre); font-style: italic; font-size: 2rem; color: #6d5a7a; animation: grésille 3s linear infinite; }
@keyframes grésille { 0%, 92%, 100% { opacity: 1; } 94% { opacity: 0.3; } 96% { opacity: 0.8; } }
.coupure-texte { margin: 0; max-width: 24rem; color: #7a7290; }
.voile-coupure .bouton { max-width: 20rem; }
body.coupure .barre { filter: brightness(0.8); }
body.coupure .debug { z-index: 36; }

/* Murmure : un souffle sur un seul téléphone */
.voile-murmure { position: fixed; inset: 0; z-index: 33; display: grid; place-content: center; text-align: center; gap: 0.5rem; background: radial-gradient(circle, rgb(20 18 40 / 0.85), rgb(0 0 0 / 0.95)); animation: prise 1s ease both; pointer-events: none; }
.murmure-intro { margin: 0; color: var(--texte-doux); font-style: italic; }
.murmure-nom { margin: 0; font-family: var(--police-titre); font-style: italic; font-size: 2.6rem; color: #d8e6ff; text-shadow: 0 0 20px rgb(200 220 255 / 0.7); animation: souffle-nom 4.5s ease forwards; }
@keyframes souffle-nom { 0% { opacity: 0; letter-spacing: 0.4em; filter: blur(6px); } 30% { opacity: 1; letter-spacing: 0.05em; filter: none; } 100% { opacity: 0; filter: blur(4px); } }

/* Carte : pièce scellée (chaînes), pièce où l'apparition appelle */
.piece-carte.scellee {
  background:
    repeating-linear-gradient(45deg, rgb(184 150 85 / 0.35) 0 3px, transparent 3px 11px),
    repeating-linear-gradient(-45deg, rgb(184 150 85 / 0.35) 0 3px, transparent 3px 11px),
    rgb(10 8 14 / 0.75);
  border-color: var(--laiton);
}
.piece-carte.appel { border: 2px solid #e9f3ff; box-shadow: 0 0 18px rgb(220 235 255 / 0.7); animation: appel-fantome 1.2s ease-in-out infinite; }
@keyframes appel-fantome { 50% { box-shadow: 0 0 28px 6px rgb(220 235 255 / 0.9); } }

/* --- Événements qui durent --- */
/* Horloge folle */
.chrono.folle { color: #d9a0ff; animation: affole 0.35s steps(2) infinite; }
@keyframes affole { 50% { transform: translateX(1px) skewX(-8deg); opacity: 0.7; } }
/* Main de l'au-delà : les mini-jeux en miroir, avec une lueur glacée */
/* Voile froid sans décaler les teintes : les couleurs qui comptent (âmes amies vertes, ✓ du caveau, bornes des fils) restent reconnaissables [D-236]. */
body.miroir [data-miroir-zone] { transform: scaleX(-1); filter: saturate(0.75) brightness(0.92) contrast(1.05); transition: transform 0.6s ease; }
/* Le jeu s'inverse, pas l'écriture [D-228] : chaque texte est retourné une seconde fois, sur place. */
body.miroir [data-miroir-zone] :is(p, h1, h2, h3, h4, label, li, button, input, select, textarea, legend, summary, figcaption, td, th, span):not(:is(p, h1, h2, h3, h4, label, li, button, legend, summary, figcaption, td, th, span) *) { scale: -1 1; } /* « scale » : se compose avec leur propre « transform » */
body.miroir [data-miroir-zone] svg text { scale: -1 1; transform-box: fill-box; transform-origin: center; }
/* Chandelle mourante */
.voile-chandelle { position: fixed; inset: 0; z-index: 31; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 60%, rgb(0 0 0 / 0.55), #000 70%); transition: opacity 0.25s linear; }
/* Murmure : le nom tremble */
.murmure-nom { animation: souffle-nom 6s ease forwards, tremble 0.12s linear infinite; }
@keyframes tremble { 50% { translate: 0.6px -0.4px; } }
/* Explosion de la cuve : tout l'écran tremble */
body.secousse { animation: secousse 0.7s ease-out; }
@keyframes secousse { 10%, 50% { transform: translate(-6px, 3px); } 30%, 70% { transform: translate(6px, -3px); } 90% { transform: translate(-2px, 1px); } }

/* Admin : actions sur un joueur, QR de reprise [D-67] */
.actions-joueur { margin-left: auto; display: flex; gap: 0.4rem; }
.bouton-icone { min-width: 2.6rem; min-height: 2.6rem; font: inherit; color: var(--texte); background: var(--nuit); border: 1px solid var(--laiton-voile); border-radius: 0.3rem; cursor: pointer; }
.bouton-icone:hover { border-color: var(--laiton); }
.qr-reprise { width: min(16rem, 100%); aspect-ratio: 1; background: #fff; padding: 0.5rem; border-radius: 0.3rem; margin-inline: auto; }

/* Cartes cachées, objectifs de l'hôte [D-73] */
.objectifs-hote { margin: 0.4rem 0 0; padding-left: 1.2rem; color: var(--texte); }
.objectifs-hote li { margin-bottom: 0.3rem; }
.debug-cartes { justify-content: center; flex-wrap: wrap; gap: 0.3rem; }

/* Coupure en chaîne [D-74] */
.chaine-reparation { display: grid; gap: 0.3rem; max-width: 22rem; text-align: left; }
.maillon { margin: 0; padding: 0.35rem 0.7rem; border-radius: 0.4rem; color: #7a7290; border: 1px solid rgb(122 114 144 / 0.3); }
.maillon.en-cours { color: #e2c98f; border-color: #b89655; }
.maillon.faite { color: #7dffb3; }
.maillon.moi { font-weight: 700; }
.code-a-crier { margin: 0; padding: 0.6rem 1rem; border-radius: 0.5rem; font: 600 1.6rem "Cormorant Garamond", serif; color: #fff4c4; background: rgb(184 150 85 / 0.2); border: 1px solid #b89655; }

/* Trouble en duo [D-76] : 250 ms, sans texte ni son. */
.zone-minijeu.trouble-glisse { transform: translateX(7px) skewX(-3deg); filter: blur(0.6px); }
.zone-minijeu.trouble-violet { filter: hue-rotate(230deg) saturate(2.2); }
.zone-minijeu.trouble-negatif { filter: invert(1) hue-rotate(180deg); }

/* === Lanterne, purification, libération, séance [D-51, D-77] === */
.voile-purification, .voile-libere {
  position: fixed; inset: 0; z-index: 41; display: grid; place-items: center; padding: 1.5rem max(1rem, 6vw);
  background: radial-gradient(circle at 50% 30%, #4a3a14, #0b0816 75%); animation: prise 0.8s ease both;
}
.voile-libere { background: radial-gradient(circle at 50% 30%, #1f5c43, #0b0816 75%); }
.voile-purification > section, .voile-libere > section { max-width: 28rem; }
.voile-purification .titre { color: var(--laiton-clair); text-shadow: 0 0 22px rgb(242 201 107 / 0.6); }
.voile-libere .titre { color: var(--vert); text-shadow: 0 0 22px rgb(125 255 179 / 0.5); }
.lanterne-purification, .soleil-libere { margin: 0; font-size: 3.6rem; line-height: 1; animation: battement-lune 2.4s ease-in-out infinite; }
.soleil-libere { color: var(--vert-clair); text-shadow: 0 0 30px var(--vert); }
.question-purification { margin: 0; font-weight: 700; font-size: 1.15rem; }
.rangee-boutons { display: flex; gap: 0.8rem; justify-content: center; }
.rangee-boutons .bouton { min-width: 7rem; }
.geste-lanterne { margin: 0.4rem 0 0; padding: 0.6rem 0.8rem; border-left: 3px solid var(--laiton); background: rgb(184 150 85 / 0.12); font-style: italic; }
.seance { border-color: var(--violet); box-shadow: 0 0 18px rgb(195 163 255 / 0.25); }
.seance .lieu-nom { color: var(--violet); }
.ame-presente.choisie { outline: 3px solid var(--violet); outline-offset: 2px; }
.ame-presente.personne { font-style: italic; }

/* === Sabotages [D-78] === */
.choix-sabotage { display: grid; gap: 0.5rem; }
.bouton.sabotage { display: grid; gap: 0.15rem; text-align: left; }
.bouton.sabotage small { font-family: var(--police-texte); font-size: 0.8rem; text-transform: none; letter-spacing: 0; opacity: 0.8; }
.barre-progression.brouillard { position: relative; background: repeating-linear-gradient(90deg, #3a3d52 0 12px, #2c2f44 12px 24px); animation: brume-barre 3s linear infinite; }
@keyframes brume-barre { to { background-position: 48px 0; } }

/* Difficulté dans l'admin [D-81] */
.choix-difficulte { display: grid; gap: 0.4rem; }
.grille-personnalise { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.6rem; }
.grille-personnalise input, .grille-personnalise select { width: 100%; }

/* Chronologie de la révélation finale [D-82] */
.chronologie { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.moment { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.6rem; align-items: baseline; }
.heure-moment { font-variant-numeric: tabular-nums; color: var(--laiton-clair); font-family: var(--police-capitales); }
.moment-possession, .moment-envoutement, .moment-sabotage, .moment-ame-relogee { color: var(--violet); }
.moment-purification, .moment-seance-terminee, .moment-ame-detruite, .moment-lanterne-trouvee { color: var(--vert-clair); }

/* Éditeur de maison [D-85] */
#editeur summary { cursor: pointer; }
.etage-editeur { display: grid; gap: 0.4rem; padding: 0.6rem; border: 1px solid var(--bordure); border-radius: 0.4rem; }
.entete-etage-editeur { display: grid; grid-template-columns: minmax(0, 1fr) 4.2rem auto auto; gap: 0.4rem; align-items: center; }
.pieces-editeur { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; min-height: 2.4rem; }
.piece-editeur { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.4rem; align-items: center; background: var(--nuit-plus-claire); border-radius: 0.3rem; padding: 0.2rem 0.4rem; }
.piece-editeur .nouvelle-piece { grid-column: 2 / -1; color: var(--laiton-clair); font-size: 0.75rem; }
.piece-editeur .indication-piece { grid-column: 2 / -1; font-size: 0.85rem; font-style: italic; } /* comment la trouver [D-250] */
.poignee-piece { cursor: grab; font-size: 1.3rem; padding: 0 0.3rem; touch-action: none; color: var(--texte-doux); }
.petit-bouton { min-height: 2.4rem; padding: 0.2rem 0.6rem; width: auto; }
.nom-etage, .numero-etage, .piece-editeur input { width: 100%; min-width: 0; }
.entete-etage-editeur { grid-template-columns: 4.6rem 1fr auto; }
.entete-etage-editeur .nom-etage { grid-column: 1 / -1; font-weight: 700; }

/* Soirée test [D-100] : le bouton « signaler » (discret, au pouce gauche) et sa fenêtre. */
.bouton-signaler {
  position: fixed;
  left: calc(0.6rem + env(safe-area-inset-left, 0px));
  bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: 1px solid var(--laiton-voile);
  background: rgb(15 17 32 / 0.85);
  font-size: 1.3rem;
  opacity: 0.75;
  cursor: pointer;
}
.voile-signalement {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(5 6 14 / 0.8);
}
.voile-signalement .carte { width: min(100%, var(--largeur-page)); }
.voile-signalement textarea, #avis textarea { font: inherit; color: var(--texte); background: var(--nuit); border: 1px solid var(--laiton-voile); border-radius: 0.2rem; padding: 0.6rem; width: 100%; }
.avis-notes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.avis-notes label { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.7rem; border: 1px solid var(--laiton-voile); border-radius: 0.2rem; }

/* Atelier de soirée test [D-101] */
.atelier-fiche { border-color: var(--violet); }
.atelier-texte { margin: 0; font-size: 1.15rem; font-weight: 600; }
.atelier-fiche .rangee { display: flex; gap: 0.5rem; }
.atelier-fiche .rangee .bouton { flex: 1; }

/* Application installable [D-111] : la marche à suivre sur iPhone. */
/* Installer l'application [D-247] : un cartouche de laiton, comme les cadres du manoir, icône du téléphone. */
.bouton-installer { display: flex; align-items: center; gap: 0.9rem; width: 100%; max-width: 26rem; padding: 0.8rem 1.1rem; text-align: left; cursor: pointer; color: var(--laiton-clair); background: linear-gradient(180deg, rgb(226 201 143 / 0.08), rgb(226 201 143 / 0.02)), var(--nuit); border: 1px solid var(--laiton); border-radius: 0.3rem; box-shadow: inset 0 0 0 3px var(--nuit), inset 0 0 0 4px var(--laiton-voile), 0 8px 24px rgb(0 0 0 / 0.35); transition: border-color 0.2s, box-shadow 0.2s; }
.bouton-installer[hidden] { display: none; }
.bouton-installer:hover, .bouton-installer:focus-visible { border-color: var(--laiton-clair); box-shadow: inset 0 0 0 3px var(--nuit), inset 0 0 0 4px var(--laiton), 0 0 22px rgb(226 201 143 / 0.25); }
.installer-icone { flex: none; width: 2.6rem; height: 2.6rem; padding: 0.45rem; fill: none; stroke: var(--laiton-clair); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; border: 1px solid var(--laiton-voile); border-radius: 50%; }
.installer-texte { display: grid; gap: 0.15rem; min-width: 0; }
.installer-titre { font-family: var(--police-capitales); font-weight: 600; font-size: 1.08rem; letter-spacing: 0.06em; }
.installer-sous { font-family: var(--police-texte); font-size: 0.85rem; color: var(--texte-doux); }
.aide-installer { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; background: rgb(5 6 14 / 0.85); }
.aide-installer .carte { width: min(100%, 26rem); }
.aide-installer ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }

/* Épreuves sociales [D-112] */
.sociale { border-color: var(--vert); }
.sociale-texte { margin: 0; font-family: var(--police-titre); font-style: italic; font-size: 1.35rem; line-height: 1.3; color: var(--texte); }
#question-sociale .rangee { display: flex; gap: 0.5rem; }
#question-sociale .rangee .bouton { flex: 1; }
#question-sociale { z-index: 95; } /* au-dessus des annonces de la maison */

/* Jauge de l'âme, dans le menu de la lune de l'hôte [D-130] */
.jauge-ame { display: flex; gap: 0.3rem; margin-top: 0.4rem; }
.jauge-ame span { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1.5px solid var(--violet); background: transparent; }
.jauge-ame span.pleine { background: var(--violet); box-shadow: 0 0 8px var(--violet); }

/* Coupure en chaîne, aide du maillon précédent [D-140] */
.aide-chaine { display: grid; gap: 0.6rem; justify-items: center; text-align: center; max-width: 24rem; }
#coupure-aide-bouton { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; min-height: 4.5rem; }
#coupure-aide-bouton.tenu { background: var(--vert, #7dffb3); color: #0f1120; box-shadow: 0 0 22px rgb(125 255 179 / 0.7); }

/* Chrono arrêté pendant la séance [D-142] : figé et pâli, avec le signe pause. */
.en-pause { opacity: 0.7; }
.en-pause::before { content: '⏸ '; }

/* Frisson du témoin [D-146] : un voile bleuté qui passe sur l'écran. */
body.frisson::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: radial-gradient(circle, rgb(180 210 255 / 0.05), rgb(150 190 255 / 0.45)); animation: frisson 1.6s ease-out forwards; }
@keyframes frisson { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: 0.4; } 45% { opacity: 0.9; } 100% { opacity: 0; } }

/* Les trois fins racontées [D-147] */
.fin-camp { text-align: center; margin: 0; }
.fin-epilogue { font-style: italic; color: var(--laiton-clair, #e2c98f); }

/* Le journal de la maison [D-153] : la barre, ce sont ses pages ; on les relit en touchant le journal. */
.journal summary { list-style: none; cursor: pointer; display: grid; gap: 0.4rem; }
.journal summary::-webkit-details-marker { display: none; }
.journal summary .etiquette::after { content: ' ▾'; opacity: 0.6; }
.journal[open] summary .etiquette::after { content: ' ▴'; }
.journal-pages { margin: 0.6rem 0 0; padding-left: 1.4rem; display: grid; gap: 0.5rem; font: italic 500 1rem/1.4 "Cormorant Garamond", serif; color: var(--texte-doux, #cfc6b4); }
.tv-journal { margin: 0.4rem 0 0; font-style: italic; opacity: 0.85; }

/* Le logo de la maison sur l'écran d'accueil du joueur [D-171] */
.logo-accueil { display: block; text-align: center; }
.logo-accueil img { height: 8.5rem; width: auto; filter: drop-shadow(0 0 14px rgb(226 201 143 / 0.35)); }

/* Consignes de départ et portrait : mêmes matières que l’espace joueur. */
.orientation-jeu { position: fixed; inset: auto; top: 0; left: 0; box-sizing: border-box; width: var(--portrait-largeur, 100vw); height: var(--portrait-hauteur, 100vh); max-width: none; max-height: none; margin: 0; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); border: 0; background: #0f1120; color: var(--texte); text-align: center; overflow-y: auto; }
/* Ne pas centrer en hauteur : Safari peut conserver la hauteur portrait pendant la rotation. */
.orientation-jeu[open] { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: .35rem; }
.orientation-jeu .orientation-icone { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
.orientation-jeu h2, .rappel-son h2 { font: 600 clamp(1.5rem, 4vw, 2rem)/1.15 var(--police-titre); color: var(--laiton-clair); margin: 0; }
.orientation-jeu p { max-width: 30rem; margin: 0; font-size: .85rem; line-height: 1.35; flex-shrink: 0; }
.orientation-jeu::backdrop, .rappel-son::backdrop { background: #060813dc; }
.rappel-son { width: min(30rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.5rem; color: var(--texte); background: #191a2b; border: 1px solid var(--laiton-voile); border-radius: 1rem; box-shadow: 0 20px 80px #0009; }
.rappel-son[open] { display: grid; gap: 1rem; }
.rappel-son p { margin: 0; }
.rappel-son-surtitre { color: var(--texte-doux); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.rappel-son .bouton { width: 100%; }
.rappel-son #rappel-son-etat:empty { display: none; }
/* Dès le 2e essai, le rappel court en tête des règles complètes [D-235]. */
.regles .en-bref { list-style: none; margin-left: -1.2rem; font-weight: 700; color: var(--laiton-clair); }
/* Mission Killer : trois réponses, empilées en pleine largeur pour rester lisibles [D-238]. */
#question-sociale .rangee { display: grid; gap: 0.5rem; }
#question-sociale .rangee .bouton { width: 100%; }

/* Le tableau de la nuit [D-248] : une galerie de portraits du manoir, cadres de laiton et plaques gravées. */
.tt-entete { margin: 0; text-align: center; font: italic 600 2.4em/1 var(--police-titre); color: #ecd59a; text-shadow: 0 0 28px rgb(184 150 85 / 0.45); }
.tt-fleuron { font-style: normal; font-size: 0.6em; color: #b89655; vertical-align: middle; }
.tt-equipe { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2vw 4vw; padding: 1.1em 1.6em; border: 1px solid #b89655; border-radius: 0.3em; background: linear-gradient(rgb(226 201 143 / 0.06), transparent), #121427; box-shadow: inset 0 0 0 4px #0b0f1e, inset 0 0 0 5px rgb(184 150 85 / 0.35); }
.tt-journal { display: grid; gap: 0.5em; justify-items: center; }
.tt-journal-titre { margin: 0; font-family: var(--police-capitales); letter-spacing: 0.1em; color: #e2c98f; }
.tt-journal-sous { margin: 0; font-size: 0.85em; color: #a9a08b; }
.tt-pages { display: flex; gap: 0.35em; }
.tt-page { width: 1.3em; height: 1.7em; border: 1px solid rgb(184 150 85 / 0.45); border-radius: 0.12em; background: rgb(255 255 255 / 0.03); }
.tt-page.recollee { background: linear-gradient(#efe2c0, #c9b07a); border-color: #ecd59a; box-shadow: 0 0 10px rgb(236 213 154 / 0.5); }
.tt-heures { display: flex; gap: 2.4vw; }
.tt-heure { margin: 0; display: grid; justify-items: center; }
.tt-heure-min { font: italic 600 2.2em/1 var(--police-titre); color: #f3e9cf; font-variant-numeric: oldstyle-nums; }
.tt-heure-min sup { font-size: 0.45em; margin-left: 0.05em; }
.tt-heure-label { font-family: var(--police-capitales); font-size: 0.8em; letter-spacing: 0.08em; color: #a9a08b; }
.tt-cadre { position: relative; display: grid; justify-items: center; align-content: start; gap: 0.45em; padding: 1.4em 1.1em 1.2em; text-align: center; border: 2px solid #b89655; border-radius: 0.35em; background: radial-gradient(ellipse at 50% 0%, rgb(226 201 143 / 0.1), transparent 60%), #141629; box-shadow: inset 0 0 0 5px #0b0f1e, inset 0 0 0 6px rgb(184 150 85 / 0.45), 0 14px 36px rgb(0 0 0 / 0.5); animation: tt-apparition 0.9s ease both; animation-delay: var(--retard, 0s); }
.tt-cadre::before, .tt-cadre::after { content: "✥"; position: absolute; top: 0.35em; font-size: 0.8em; color: #b89655; opacity: 0.8; }
.tt-cadre::before { left: 0.5em; } .tt-cadre::after { right: 0.5em; }
.tt-cadre.envoute, .tt-cadre.hote { border-color: #9b7fd1; box-shadow: inset 0 0 0 5px #0b0f1e, inset 0 0 0 6px rgb(195 163 255 / 0.4), 0 14px 36px rgb(0 0 0 / 0.5), 0 0 26px rgb(195 163 255 / 0.12); background: radial-gradient(ellipse at 50% 0%, rgb(195 163 255 / 0.12), transparent 60%), #15132a; }
@keyframes tt-apparition { from { opacity: 0; transform: translateY(1em); } }
.tt-portrait { position: relative; }
.tt-portrait .medaillon { width: 4.6em; height: 5.6em; box-shadow: 0 0 0 3px #0b0f1e, 0 0 0 5px #b89655, 0 8px 20px rgb(0 0 0 / 0.5); }
.tt-cadre.envoute .tt-portrait .medaillon, .tt-cadre.hote .tt-portrait .medaillon { box-shadow: 0 0 0 3px #0b0f1e, 0 0 0 5px #9b7fd1, 0 0 22px rgb(195 163 255 / 0.4); }
.tt-sceau { position: absolute; right: -0.4em; bottom: 0.1em; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; font-size: 0.9em; color: #1a1230; background: radial-gradient(#e6d9ff, #9b7fd1); box-shadow: 0 0 14px rgb(195 163 255 / 0.8); }
.tt-nom { margin: 0.2em 0 0; font: italic 600 1.55em/1.1 var(--police-titre); color: #f3e9cf; }
.tt-plaque { margin: 0; padding: 0.15em 0.9em; font-family: var(--police-capitales); font-size: 0.85em; letter-spacing: 0.12em; color: #1a1406; background: linear-gradient(#ecd59a, #b89655); border-radius: 0.15em; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35), 0 2px 6px rgb(0 0 0 / 0.4); }
.tt-plaque.envoute, .tt-plaque.hote { color: #f3ecff; background: linear-gradient(#8f72c7, #5a3f8e); }
.tt-ruban { position: relative; width: calc(100% + 1.8em); margin: 0.3em -0.9em 0.1em; padding: 0.45em 1.2em; background: linear-gradient(90deg, transparent, rgb(184 150 85 / 0.22) 12%, rgb(184 150 85 / 0.22) 88%, transparent); border-block: 1px solid rgb(184 150 85 / 0.5); }
.tt-titre { margin: 0; font: italic 700 1.15em/1.15 var(--police-titre); color: #ecd59a; }
.tt-titre-texte { margin: 0.1em 0 0; font-size: 0.8em; color: #c9bfa6; }
.tt-liste { width: 100%; margin: 0.5em 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7em 1.1em; }
.tt-registre { display: grid; justify-items: center; align-content: start; gap: 0.1em; width: 6.5em; text-align: center; }
.tt-icone { width: 1.2em; height: 1.2em; align-self: center; fill: none; stroke: #e2c98f; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tt-chiffre { font: 600 2em/1 var(--police-titre); font-variant-numeric: oldstyle-nums; color: #f3e9cf; }
.tt-mot { font-family: var(--police-capitales); font-size: 0.78em; letter-spacing: 0.06em; line-height: 1.15; color: #c9bfa6; max-width: 6.5em; }
.tt-detail { font: italic 0.85em/1.2 var(--police-titre); color: #a9a08b; }
.tt-notes { width: 100%; display: grid; gap: 0.25em; padding-top: 0.4em; border-top: 1px solid rgb(184 150 85 / 0.3); }
.tt-note { margin: 0; display: flex; align-items: center; justify-content: center; gap: 0.4em; font: italic 600 1em/1.25 var(--police-titre); }
.tt-note.violet { color: #c3a3ff; } .tt-note.violet .tt-icone { stroke: #c3a3ff; }
.tt-note.doree { color: #ecd59a; }
@media (prefers-reduced-motion: reduce) { .tt-cadre { animation: none; } }
/* Sur le téléphone [D-248] : sa nuit en tête, bien en vue, puis la galerie de toute la table. */
.tt-cadre.le-mien { border-color: #ecd59a; box-shadow: inset 0 0 0 5px #0b0f1e, inset 0 0 0 6px #ecd59a, 0 0 26px rgb(236 213 154 / 0.35); }
.fin-tableau { display: grid; gap: 1rem; }
.fin-tableau .tt-equipe { flex-direction: column; gap: 1rem; padding: 1rem; font-size: 0.9rem; }
.fin-tableau .tt-entete { font-size: 1.8rem; }
.fin-ma-nuit { display: grid; justify-items: center; }
.fin-ma-nuit .tt-cadre { width: min(100%, 20rem); font-size: 1.05rem; }
.fin-tableau-joueurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 45%), 1fr)); gap: 0.7rem; font-size: 0.78rem; }
.fin-tableau-joueurs .tt-registre { width: 5.6em; }

/* Écran de lecture avant le mini-jeu [D-253] */
.lecture-minijeu { display: grid; gap: 0.8rem; text-align: left; }
.lecture-minijeu .regles { margin: 0; padding-left: 1.2rem; line-height: 1.5; }
.lecture-compte { font-variant-numeric: tabular-nums; color: var(--laiton, #b89655); margin: 0; }

/* Le mot secret de l'envoûtement [D-257] */
.mot-envoutement { font-family: var(--police-titre); font-style: italic; font-size: 1.6rem; color: var(--violet); margin: 0.2rem 0; }
#mot-secret-champ { font-size: 1.2rem; padding: 0.7rem; }

/* Secours toujours à portée : épreuves, scanner, rafraîchir */
.defis-btn { position: relative; }
.defis-pastille { position: absolute; top: -0.15rem; right: -0.25rem; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.defis-btn.appel { animation: lune-appel 1.4s ease-in-out infinite; }
.secours-flottant { display: none; position: fixed; z-index: 44; top: calc(0.3rem + env(safe-area-inset-top, 0px)); right: 0.5rem; gap: 0.5rem; padding: 0.25rem 0.5rem; border-radius: 999px; background: rgb(15 17 32 / 0.7); border: 1px solid rgb(184 150 85 / 0.4); }
body.en-minijeu .secours-flottant { display: flex; }
.secours-flottant .son { font-size: 1.05rem; }
.voile-defis { position: fixed; inset: 0; z-index: 46; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem; background: rgb(8 6 16 / 0.88); overflow-y: auto; }
.voile-defis .carte { width: min(100%, 30rem); }