/* ================= Écrans superposés : une seule grammaire visuelle (volet C de REVIEW.md) =================
   Chargé en dernier. Bilan, briefing et rapport CRS, garde à vue, récit E12, fin, transition, préparation :
   même trame sur la carte vivante, même cadre .px, mêmes titres (Silk, ombre rouge), même texte (Pixelify),
   même palette (variables de index.html), HUD toujours masqué. */

/* ---------- scénarios : « Jouer » et « Partir tout de suite » ---------- */
#scen-detail .scen-go { align-self: end; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
#scen-detail .scen-go .mi { margin: 0; white-space: nowrap; }
#scen-detail .scen-go .quick small { margin-left: calc(var(--u) * 3); }

/* ---------- 1. Fond : la carte vivante sous une trame sombre (comme le bilan), jamais un aplat opaque ---------- */
#custody, #prep {
  background-color: transparent !important;
  background-image: repeating-conic-gradient(rgba(20, 16, 24, .82) 0 25%, rgba(20, 16, 24, .55) 0 50%) !important;
  background-size: calc(var(--u) * 2) calc(var(--u) * 2) !important; }
/* écrans ouverts pendant la partie (briefing et rapport CRS, carte tactique) : même trame, posée sous le panneau */
body.ecran-on::before { content: ''; position: fixed; inset: 0; z-index: 19; pointer-events: none;
  background-image: repeating-conic-gradient(rgba(20, 16, 24, .72) 0 25%, rgba(20, 16, 24, .38) 0 50%);
  background-size: calc(var(--u) * 2) calc(var(--u) * 2); }

/* ---------- 2. Cadre : panneau .px, fond --bg, mêmes marges ---------- */
:is(#bilan-box, #tr-box, #recit-box, #fin-box, #custody .card, #prep .card, #crs-brief, #crs-rapport) { background-color: var(--bg) !important; }
:is(#recit-box, #fin-box, #custody .card, #crs-rapport) { padding: calc(var(--u) * 6) calc(var(--u) * 8) !important; }
#crs-brief { inset: calc(var(--u) * 8) !important; }

/* ---------- 3. Surtitre : Silk, jaune, petites capitales espacées ---------- */
:is(#fin-box .fin-kicker, #recit-box .rc-head .k, #tr-box .tr-date, #custody .cu-place, #crs-brief .bf-head, #crs-rapport .rp-head) {
  font: calc(var(--u) * 3.8)/1.2 'Silk', monospace !important; letter-spacing: .06em; text-transform: uppercase; color: var(--sun) !important; }
:is(#crs-brief .bf-head, #crs-rapport .rp-head) .dim, #custody .cu-place span:last-child { color: var(--dim) !important; }
:is(#crs-brief .bf-head, #crs-rapport .rp-head) .t { color: inherit; }

/* ---------- 4. Titre : Silk, papier, ombre encre + rouge (h2.pxt du bilan) ---------- */
:is(#bilan-box, #tr-box, #recit-box, #fin-box, #crs-brief, #crs-rapport) h2, #prep h1, #custody .ec-title {
  font: calc(var(--u) * 9)/1.05 'Silk', monospace !important; text-transform: uppercase; color: var(--paper) !important; margin: calc(var(--u) * 1.5) 0 calc(var(--u) * 2) !important;
  text-shadow: var(--u) var(--u) 0 var(--ink), calc(var(--u) * 2) calc(var(--u) * 2) 0 #96202a !important; }
#prep h1 span { color: var(--sun); }
#fin-box h2.bad { color: #ffb4a8 !important; } #fin-box h2.good { color: var(--green) !important; }
#tr-box h2 { font-size: calc(var(--u) * 8) !important; }
/* sous-titres de section : Silk jaune (h3.pxt) */
:is(#crs-brief, #crs-rapport, #bilan-box, #fin-box) h3 { font: calc(var(--u) * 4.4)/1.2 'Silk', monospace !important; color: var(--sun) !important; text-transform: uppercase; }

/* ---------- 5. Texte courant : Pixelify, papier, interligne aéré ---------- */
:is(#fin-box .fin-texte, #recit-box .rc-text, #custody .cu-text, #tr-box .tr-intro, #bilan-box .epilogue) { font-size: calc(var(--u) * 5) !important; line-height: 1.45 !important; color: var(--paper) !important; }
:is(#recit-box .rc-head .l, #bilan-box .who, #tr-box .tr-where, #prep .sub, #crs-brief .bf-who) { color: var(--dim) !important; font-size: calc(var(--u) * 4.4) !important; }
#custody .cu-text .reply { color: #c8e6ff; } #custody .cu-text .say { color: var(--sun); }

/* ---------- 6. Choix et boutons : la grammaire des .mi du menu ---------- */
:is(#custody .cu-choices button, #recit-box .rc-c) { font: calc(var(--u) * 4.6)/1.3 'Pixelify', monospace !important; background: var(--bg2) !important; color: var(--paper) !important;
  box-shadow: inset 0 0 0 var(--u) var(--ink), 0 var(--u) 0 var(--ink) !important; padding: calc(var(--u) * 1.5) calc(var(--u) * 3) !important; }
:is(#custody .cu-choices button:hover, #custody .cu-choices button.focus, #recit-box .rc-c:hover, #recit-box .rc-c.sel) { background: var(--sun) !important; color: var(--ink) !important; }
:is(#crs-brief, #crs-rapport, #prep) button.go { font: calc(var(--u) * 5)/1 'Silk', monospace !important; background: var(--sun) !important; color: var(--ink) !important;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 5) !important; box-shadow: inset 0 0 0 var(--u) var(--ink), 0 var(--u) 0 #8a6a00 !important; }

/* ---------- 7. HUD masqué sous tous ces écrans ---------- */
body.ecran-on :is(#hud-mission, #hud-vitals, #hotbar, #keyhint, #keys, #log, #menu, #top, #qtrack, #alarm, #phone-icon, #phone, #phone-toast, #crs-radio, #skill-note, #encircle, #hidden-banner, #perf-panel) { display: none !important; }
body:is([data-scene="custody"], [data-scene="prep"], [data-scene="bilan"], [data-scene="transition"], [data-scene="recit"], [data-scene="fin"]) :is(#qtrack, #phone-toast, #crs-radio) { display: none !important; }

/* ---------- crédits ---------- */
#cred-box.credits { max-width: min(calc(var(--u) * 250), 94vw); }
#cred-box .cred-lead { font-size: calc(var(--u) * 4.8); }
#cred-box .cred-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--u) * 8); }
#cred-box .cred-cols p { margin: 0 0 calc(var(--u) * 3.5); }