/* Écran du maître du jeu */
.mj { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: calc(var(--haut) + 16px) 16px calc(var(--bas) + 40px); }
.mj .titre-academie { text-align: center; font-size: 1.6rem; margin-bottom: 8px; }
.mj-connexion { text-align: center; font-weight: 800; color: #8ff0c2; margin-bottom: 14px; }
.mj-connexion.ko { color: var(--rouge); }
.mj-bloc {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.mj-bloc h2 { font-size: 1.1rem; }
.mj-ou { font-size: 1.08rem; font-weight: 800; }
.mj-sablier { font-weight: 800; color: var(--or-clair); }
.mj-joueurs { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.mj-joueurs li { padding: 6px 10px; border-left: 4px solid var(--c); background: rgba(255, 255, 255, 0.05); border-radius: 8px; }
.mj-joueurs small { color: var(--texte-doux); }
.mj-reponse { padding: 12px; border-radius: 10px; background: var(--parchemin); color: var(--encre); font-weight: 800; }
.mj-indices { padding-left: 22px; color: var(--texte-doux); }
.mj-indices li { margin: 4px 0; }
.mj-indices li.revele { color: #8ff0c2; }
.mj-actions .btn { margin-top: 10px; }
.mj textarea {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 2px solid var(--or);
  background: #fffaf0;
  color: var(--encre);
  font: 700 16px 'Nunito', sans-serif;
}
.mj-photos { display: grid; gap: 12px; }
.mj-photo { display: flex; gap: 12px; align-items: center; }
.mj-vignette {
  width: 84px;
  height: 84px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  display: grid;
  place-items: center;
  font-size: 2rem;
}
.mj-vignette img { width: 100%; height: 100%; object-fit: cover; }
.mj-photo-infos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mj-photo-infos small { color: var(--texte-doux); }
.btn-petit { padding: 8px 14px; font-size: 0.92rem; margin-top: 6px; text-align: center; }
.mj-photo-infos .lien { color: var(--texte-doux); margin: 4px 0 0; text-align: left; }
.mj details { margin-top: 14px; }
.mj summary { font-weight: 800; cursor: pointer; }
.mj details li { margin: 8px 0; }
.mj a.btn { text-align: center; text-decoration: none; }
.btn-danger { background: linear-gradient(180deg, #ff9aa8, var(--rouge) 50%, #b4233a); color: #fff; margin-top: 18px; }

/* ---------- Narrateur ---------- */
.mj-resume { position: sticky; top: calc(var(--haut) + 6px); z-index: 5; background: rgba(29, 20, 70, 0.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mj-resume .mj-sablier { font-size: 1.25rem; margin-bottom: 4px; }
.mj-resume .mj-ou { margin-bottom: 8px; }
.mj-resume .mj-ou small { font-weight: 600; color: var(--texte-doux); }
.mj-progression { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.mj-progression div { height: 100%; background: linear-gradient(90deg, var(--or-fonce), var(--or-clair)); transition: width 0.6s; }

.mj-alerte { margin-bottom: 10px; padding: 12px 14px; border-radius: 14px; border-left: 6px solid; font-weight: 800; }
.mj-alerte p { margin: 0 0 4px; }
.mj-alerte .petit { font-weight: 600; }
.mj-alerte.rouge { background: rgba(255, 90, 110, 0.16); border-color: var(--rouge); }
.mj-alerte.orange { background: rgba(255, 170, 60, 0.16); border-color: #ffaa3c; }
.mj-alerte.bleu { background: rgba(110, 160, 255, 0.16); border-color: #6ea0ff; }
.mj-alerte .btn { margin-top: 8px; }

.mj-apprentis { display: grid; gap: 10px; }
.mj-apprenti { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border-left: 5px solid var(--c); background: rgba(255, 255, 255, 0.05); }
.mj-apprenti p { margin: 0 0 3px; }
.mj-apprenti small { color: var(--texte-doux); }
.mj-embleme { width: 46px; height: 46px; object-fit: contain; flex: none; }
.mj-vue { font-weight: 700; color: var(--or-clair); }
.mj-erreurs { color: var(--rouge); font-weight: 800; }

.mj-laby { max-width: 320px; margin: 10px auto; }
.mj-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.92rem; }
.mj-table th, .mj-table td { padding: 5px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); text-align: left; }
.mj-table tr.antidote td { background: rgba(67, 211, 158, 0.2); font-weight: 800; }

.mj-gardien { margin: 10px 0; padding: 12px; border-radius: 14px; background: rgba(243, 194, 90, 0.1); border: 1px solid rgba(243, 194, 90, 0.5); }
.mj-gardien-image { width: 120px; margin: 0 auto 6px; }
.mj-replique { font-style: italic; font-weight: 700; color: var(--or-clair); }
.mj-question { margin: 10px 0; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.mj-question.faite { opacity: 0.6; }
.mj-question p { margin: 0 0 4px; }
.mj-boutons-question { display: flex; gap: 8px; }
.mj-boutons-question .btn { margin-top: 4px; }

.mj-effets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mj-effets .btn { margin: 0; padding: 12px 8px; font-size: 0.95rem; }

.mj-recap summary { font-weight: 800; cursor: pointer; margin-bottom: 6px; }
.mj-journal { list-style: none; padding: 0; margin: 10px 0 0; max-height: 420px; overflow-y: auto; font-size: 0.9rem; }
.mj-journal li { padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mj-journal li.erreur { color: #ffb3bd; }
.mj-journal li.juste { color: #a8f0cf; }
.mj-journal li.etape { font-weight: 800; color: var(--or-clair); }
.mj-heure { color: var(--texte-doux); font-variant-numeric: tabular-nums; margin-right: 4px; }
details.mj-bloc summary { font: 700 1.05rem 'Cinzel', serif; color: var(--or); cursor: pointer; }
details.mj-bloc h3 { margin-top: 16px; color: var(--or-clair); }

/* Préparation, déroulé, Gardien */
.mj-compte { font: 700 0.9rem 'Nunito', sans-serif; color: var(--texte-doux); }
.mj-preparation h3, #mj-deroule h3, #mj-toutes h3 { font-size: 1rem; margin: 16px 0 6px; }
#mj-deroule h3 small { font: 600 0.8rem 'Nunito', sans-serif; color: var(--texte-doux); }
.mj-coches { list-style: none; padding: 0; margin: 0; }
.mj-coches li { margin: 6px 0; }
.mj-coches label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.mj-coches input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--or); }
.mj-coches input:checked + span { opacity: 0.55; text-decoration: line-through; }
.mj-deroule { padding-left: 0; list-style: none; margin: 0; }
.mj-deroule > li { margin: 8px 0; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border-left: 4px solid transparent; }
.mj-deroule > li p { margin: 0 0 4px; }
.mj-deroule > li small { color: var(--texte-doux); }
.mj-deroule > li.fait { opacity: 0.55; }
.mj-deroule > li.en-cours { border-left-color: var(--or); background: rgba(243, 194, 90, 0.12); }
.mj-sous { margin: 4px 0 0 4px; line-height: 1.35; }
.mj-sous.courante { padding: 4px 6px; border-radius: 8px; background: rgba(243, 194, 90, 0.18); }
.mj-questions-gardien li { margin: 8px 0; }
#mj-role-gardien .mj-gardien-image { width: 110px; }

/* Aller à une énigme */
.mj-aller { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.mj-aller label { display: block; font-weight: 800; margin-bottom: 6px; }
.mj-aller select {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 2px solid var(--or);
  background: #fffaf0;
  color: var(--encre);
  font: 700 16px 'Nunito', sans-serif;
}
.mj-aller .btn { margin-top: 10px; }