/* DeathBook — styles (Jalon 1). Objectif : plein écran, responsive, mobile-friendly. */

/* ============================================================================================
 * J253 — ÉCHELLE TYPOGRAPHIQUE.
 *
 * La feuille comptait **vingt et une** tailles de police pour 265 déclarations : 9, 9,5, 10,
 * 10,5, 11, 11,5, 12, 12,5, 13, 13,5, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 54. Écrites au
 * fil des jalons, chacune raisonnable prise seule, et l'ensemble sans aucun rapport : deux
 * panneaux voisins n'avaient pas la même taille de texte courant, et rien ne disait ce qui
 * comptait. « Taille de police non adaptée à la quantité de texte » (retour n°16).
 *
 * Six crans, choisis sur les tailles RÉELLEMENT observées à l'écran (mesurées au navigateur,
 * pas comptées dans la feuille). À égalité, on arrondit VERS LE HAUT : un jalon qui corrige un
 * défaut de lisibilité n'a pas à rapetisser quarante-cinq déclarations au passage.
 *
 * Au-delà de 18 px, on ne touche à rien : ce sont des pièces uniques (écran-titre, chiffre de fin
 * de partie), dont la taille est un choix de composition et non du texte courant.
 * Les BULLES du monde sont dessinées au canvas et n'en dépendent pas — c'était l'exclusion
 * demandée.
 * ========================================================================================== */
:root {
  --fs-micro: 10px;  /* estampilles, horodatages, mentions de bas de fiche */
  --fs-xs: 11px;     /* légendes, sous-titres discrets, motifs d'indisponibilité */
  --fs-sm: 12px;     /* texte dense : listes, journaux, tableaux */
  --fs-md: 13px;     /* TEXTE COURANT — la base */
  --fs-lg: 15px;     /* titres de panneau, notifications qui comptent */
  --fs-xl: 18px;     /* titres d'écran */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0e0e12;
  color: #e8e8ec;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Évite le surlignage / menu contextuel lors des interactions tactiles. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- HUD ---- */
#hud {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  /* J149 : bandeau ANCRÉ à gauche (fin du recentrage). Avant, justify-content:center
     recentrait toute la rangée à chaque changement de largeur d'une pastille (horloge
     qui défile, argent, pastilles contextuelles) → l'heure et le lieu ne restaient jamais
     à la même place. Ancré à gauche, l'horloge est le point fixe : rien ne recentre. */
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 96vw;
  pointer-events: none;
  z-index: 10;
}

/* ---- J152 : fond estompé des modals « document » centrés ----
   Un seul élément partagé, sous tous les modals (z-index 25 < carnet/dossier 26 < autres 40+).
   Piloté en CSS pur : dès qu'un modal centré est ouvert, `:has()` le révèle. Il concentre la
   lecture (assombrit le jeu + léger flou) sans rien changer au gameplay. */
#modal-backdrop {
  position: fixed; inset: 0; z-index: 25;
  background: rgba(6, 7, 12, 0.5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.16s ease-out;
}
body:has(#notebook-panel:not(.hidden)) #modal-backdrop,
body:has(#casebook-panel:not(.hidden)) #modal-backdrop,
body:has(#files-panel:not(.hidden)) #modal-backdrop,
body:has(#registry-panel:not(.hidden)) #modal-backdrop,
body:has(#phone-panel:not(.hidden)) #modal-backdrop,
body:has(#plan-panel:not(.hidden)) #modal-backdrop,
body:has(#show-panel:not(.hidden)) #modal-backdrop,
body:has(#cellcall-panel:not(.hidden)) #modal-backdrop {
  opacity: 1; pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) { #modal-backdrop { transition: none; } }

/* ---- Flash plein écran ---- */
#flash {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 120% at 50% 40%, rgba(226,59,90,0.55), rgba(226,59,90,0.0) 70%);
}
#flash.flash-run { animation: flash-anim 0.7s ease-out; }
@keyframes flash-anim { 0% { opacity: 0; } 14% { opacity: 0.85; } 100% { opacity: 0; } }

.hud-pill {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--fs-md);
  font-weight: 600;
  background: rgba(20, 20, 28, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  /* J149 : chiffres à chasse fixe → un « 3 » et un « 8 » occupent la même largeur,
     donc l'horloge et l'argent ne font plus onduler la rangée en défilant. */
  font-variant-numeric: tabular-nums;
}

/* J149 : le compte à rebours (et l'argent) dans une boîte de largeur fixe, aligné à droite.
   La valeur qui défile reste dans son cadre → aucune pastille voisine ne bouge. */
.hud-cd { display: inline-block; min-width: 3.1em; text-align: right; }
.hud-num { display: inline-block; min-width: 2.8em; text-align: right; }

.hud-pill--muted {
  color: #9a9aa6;
  font-weight: 500;
}

#net-status.online {
  color: #6ee7a8;
  border-color: rgba(110, 231, 168, 0.3);
}

#eyes-timer {
  color: #ffd9e0;
  background: rgba(60, 10, 20, 0.85);
  border-color: rgba(226, 59, 90, 0.6);
  font-weight: 700;
}

#help {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0.7;
  font-size: var(--fs-sm);
}

/* Sur petit écran tactile, l'aide clavier est inutile. */
@media (pointer: coarse) {
  #help { display: none; }
}

/* ---- Joystick tactile ---- */
#joystick {
  position: fixed;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.12);
  z-index: 20;
  touch-action: none;
}

#joystick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(230, 230, 236, 0.85);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ---- J300 ⑪ : infobulle des outils ----
   Huit boutons de la colonne ne portent qu'un émoji. Ils avaient bien un `title`, mais l'infobulle
   native met environ une seconde à paraître et n'existe PAS au doigt : sur mobile, ces huit icônes
   étaient muettes. On l'affiche donc nous-mêmes, immédiatement, et `aria-label` garde le nom
   accessible (le `title` a été retiré — deux textes pour la même chose auraient divergé).
   Elle s'ouvre vers la GAUCHE : ces boutons sont collés au bord droit, une bulle à droite sortirait
   du cadre (même famille que le piège J219 sur les panneaux ancrés). */
button[data-tip] { position: relative; }
button[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 27;                 /* au-dessus du bouton lui-même (26) */
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(16, 16, 22, 0.95);
  color: #e8e8ec;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;        /* elle ne doit jamais voler le clic du bouton */
  opacity: 0;
  transition: opacity 0.12s ease;
}
button[data-tip]:hover::after,
button[data-tip]:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { button[data-tip]::after { transition: none; } }
/* Sous 700 px la colonne d'outils n'a plus de gouttière (J219) : une bulle horizontale mordrait
   sur le jeu. On la passe AU-DESSUS du bouton, où la place existe toujours. */
@media (max-width: 700px) {
  button[data-tip]::after {
    right: auto; left: 50%; top: auto; bottom: calc(100% + 6px);
    transform: translateX(-50%);
    max-width: 60vw; white-space: normal; text-align: center;
  }
}

/* ---- J299 : minuteur circulaire d'un geste qui dure ----
   Fouiller un corps prend quatre secondes, une fouille minutieuse bien davantage — et s'éloigner
   annule tout. Le joueur n'avait aucun retour : il pressait la touche, rien ne bougeait à l'écran,
   il repartait, la fouille tombait. Le disque dit à la fois QUE ça a commencé, COMBIEN il reste, et
   qu'il faut rester là.
   Centré par `translateX(-50%)` : il ne reçoit donc JAMAIS `panel-in`, qui anime le `transform` et
   écraserait le centrage (piège J151). L'animation ne porte que sur le tracé du cercle. */
#cast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  z-index: 24;                 /* sous le fond estompé (25) : un geste en cours n'est pas un panneau */
  width: 48px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;        /* purement informatif — il ne doit jamais intercepter un clic */
}
#cast svg { position: absolute; top: 0; left: 0; transform: rotate(-90deg); }
#cast .cast-bg { fill: rgba(16, 16, 22, 0.82); stroke: rgba(255, 255, 255, 0.14); stroke-width: 3; }
#cast .cast-arc {
  fill: none; stroke: #e2b53b; stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 125.66;    /* 2πr, r = 20 */
  stroke-dashoffset: 125.66;   /* plein vide au départ ; le script le fait décroître */
}
#cast .cast-icon { position: absolute; top: 12px; font-size: var(--fs-xl); line-height: 1; }
#cast .cast-label {
  position: absolute; top: 50px; white-space: nowrap;
  font-size: var(--fs-micro); font-weight: 700; color: #e8e8ec;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
@media (prefers-reduced-motion: reduce) { #cast .cast-arc { transition: none; } }

/* ---- Coupe-son ---- */
#mute-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 26; /* J210 : au-dessus du fond estompé (25) */
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(20, 20, 28, 0.85);
  font-size: var(--fs-xl);
  cursor: pointer;
  touch-action: manipulation;
}

/* ---- Aide-mémoire des touches ---- */
#keys-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 62px);
  z-index: 26; /* J210 : au-dessus du fond estompé (25) */
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(20, 20, 28, 0.85);
  color: #e8e8ec;
  font-size: var(--fs-xl);
  cursor: pointer;
  touch-action: manipulation;
}
#keys-panel {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px); /* J219 : gouttière réservée ≥ 700 px */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 112px);
  z-index: 30;
  width: min(340px, calc(100vw - 24px));
  max-height: 70vh; overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(16, 16, 22, 0.96);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  color: #d7d7de;
}
#keys-panel h2 { font-size: var(--fs-lg); margin-bottom: 8px; color: #cfe3ff; }
#keys-panel .keys-sec { margin: 9px 0 3px; color: #9a9aa6; font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; }
/* J253 : une LIGNE par raccourci — la touche à gauche, ce qu'elle fait à droite. La colonne des
 * touches a une largeur fixe : c'est ce qui permet de balayer la liste des yeux au lieu de la lire. */
#keys-panel .keys-row { display: flex; align-items: baseline; gap: 4px; font-size: var(--fs-md); line-height: 1.45; padding: 3px 0; }
#keys-panel .keys-row span { flex: 1 1 auto; min-width: 0; }
#keys-panel kbd {
  flex: none; display: inline-block; min-width: 22px; text-align: center;
  padding: 2px 6px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom-width: 2px;
  color: #fff; font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
}
#keys-panel .keys-row b { color: #fff; }
#keys-panel .keys-hint { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); color: #9a9aa6; font-size: var(--fs-sm); font-style: italic; }

/* ---- Indicateur Kira (privé) ---- */
#kira-badge {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 52px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: #ffd9e0;
  background: rgba(60, 10, 20, 0.85);
  border: 1px solid rgba(226, 59, 90, 0.6);
  box-shadow: 0 0 16px rgba(226, 59, 90, 0.4);
}

/* ---- Bannière d'événement ---- */
#event-banner {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  max-width: 88%;
  padding: 14px 20px;
  border-radius: 12px;
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.4;
  color: #f4f4f8;
  background: rgba(10, 12, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  animation: banner-in 0.3s ease;
}

@keyframes banner-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---- Toasts empilés (J78) ---- */
/* J467 — SUR LE FLANC DROIT (Charly) : sous la barre du haut, à gauche de la colonne d'icônes, la
 * plus récente en haut. Le centre de l'écran reste au personnage et à la bannière d'événement. */
#toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  right: 68px;
  z-index: 25;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
  width: min(372px, calc(100vw - 96px));
}
/* J251 — trois niveaux, trois allures. La forme change AVEC la durée : une alerte qui reste 12 s
 * doit se distinguer au premier coup d'œil d'une info qui passe en 4,5 s, sinon la hiérarchie
 * n'existe que dans le code. Pastille arrondie pour l'info, carte à liseré pour le reste. */
.toast-line {
  position: relative;
  overflow: hidden;
  padding: 9px 16px 11px;
  border-radius: 999px;
  font-size: var(--fs-md);
  line-height: 1.4;
  font-weight: 600;
  color: #e8e8ec;
  background: rgba(20, 20, 28, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: toast-in 0.18s ease-out;
  max-width: 100%;
  text-align: center;
}
/* Les messages longs (pouvoirs métier, reçus de saisie) tenaient sur une ligne coupée par la
 * largeur de l'écran : ils se replient maintenant proprement, et la pastille devient une carte. */
.toast-line .toast-text { max-width: 100%; }
.toast-clef, .toast-alerte {
  border-radius: 12px;
  padding: 11px 18px 13px;
  font-size: var(--fs-lg);
  border-left-width: 4px;
  text-align: left;
}
.toast-clef {
  border-color: rgba(226, 181, 59, 0.5);
  border-left-color: #e2b53b;
  background: rgba(30, 25, 14, 0.95);
  color: #f4e3b6;
}
.toast-alerte {
  border-radius: 12px;
  font-size: var(--fs-lg);
  border-color: rgba(226, 59, 90, 0.55);
  border-left-color: #e23b5a;
  background: rgba(34, 14, 18, 0.96);
  color: #ffd9df;
  box-shadow: 0 6px 22px rgba(226, 59, 90, 0.22);
}
/* Jauge d'écoulement : elle rend la durée visible, ce qui est ce qui permet d'allonger sans que
 * le message ait l'air figé. `animation-duration` est posée en JS, au niveau près. */
.toast-bar {
  position: absolute;
  left: 0; bottom: 0; height: 2px;
  width: 100%;
  transform-origin: left center;
  background: rgba(255, 255, 255, 0.32);
  animation: toast-drain linear forwards;
}
.toast-clef .toast-bar { background: rgba(226, 181, 59, 0.75); height: 3px; }
.toast-alerte .toast-bar { background: rgba(226, 59, 90, 0.85); height: 3px; }
@keyframes toast-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast-bar { animation: none; opacity: 0.4; } }

/* ---- Fermeture universelle des panneaux (J78) ---- */
.panel-x {
  float: right;
  margin-left: 10px;
  width: 36px; height: 36px; /* cible tactile confortable (J96) */
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #c6c6d0; font-size: var(--fs-md); line-height: 1;
  cursor: pointer; touch-action: manipulation;
}
.panel-x:active { transform: translateY(1px); }

/* En-têtes de groupes du menu ⚡ (J78) */
#actions-panel .act-grp {
  margin: 10px 0 4px;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #9a9aa6;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 3px;
}

#chat-bar #chat-send {
  border: none; border-radius: 8px; padding: 9px 14px;
  background: #6b9bd8; color: #101014; font-size: var(--fs-lg); font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}

/* ---- Bouton « Ramasser » ---- */
#interact-btn {
  position: fixed;
  /* J484 : à gauche de la colonne de boutons, comme ⚡ (+76 px) — à +24 px il recouvrait ⌨ et 🎒. */
  right: calc(env(safe-area-inset-right, 0px) + 76px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 90px);
  z-index: 22;
  padding: 14px 22px;
  border: none;
  border-radius: 14px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #101014;
  background: #e2b53b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  touch-action: manipulation;
}
#interact-btn:active { transform: translateY(1px); }

/* ---- Chat (Jalon 65) ---- */
#convo-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 312px); /* au-dessus de 🗺 */
  z-index: 26; /* J210 : au-dessus du fond estompé (25) */
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(20, 20, 28, 0.85);
  font-size: var(--fs-xl);
  cursor: pointer; touch-action: manipulation;
}
#plan-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 262px); /* au-dessus de 💬 Parler */
  z-index: 26; /* J210 : au-dessus du fond estompé (25) */
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(20, 20, 28, 0.85);
  font-size: var(--fs-xl);
  cursor: pointer; touch-action: manipulation;
}
#chat-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 212px);
  z-index: 26; /* J210 : au-dessus du fond estompé (25) */
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(20, 20, 28, 0.85);
  font-size: var(--fs-xl);
  cursor: pointer; touch-action: manipulation;
}
#chat-bar {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 140px);
  z-index: 32;
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  width: min(480px, 92vw);
  padding: 10px;
  background: rgba(16, 16, 22, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}
#chat-bar select, #chat-bar input {
  border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 9px 10px;
  background: #201f26; color: #e8e8ec; font-size: var(--fs-md);
}
#chat-bar select { max-width: 100%; }
#chat-bar input { flex: 1 1 200px; }
#chat-log {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  top: calc(env(safe-area-inset-top, 0px) + 96px);
  z-index: 18;
  max-width: min(320px, 70vw);
  font-size: var(--fs-md); line-height: 1.5;
  color: #e8e8ec;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  pointer-events: none;
}
#chat-log .tag-cell { color: #6b9bd8; font-weight: 700; }
#chat-log .tag-morts { color: #9b97a2; font-weight: 700; }

/* ---- Salle de vidéosurveillance (Jalon 76) ---- */
/* J268 — c'est un POSTE INFORMATIQUE, pas un téléphone. Le panneau tenait dans 324 px : la dalle
   faisait 288 px de large pour 17,5 tuiles de champ, soit ~12 px la tuile — un habitant y occupait
   8 px sur 12, on ne distinguait personne. Le champ (J254) n'est PAS en cause et n'est pas touché :
   c'est la taille À L'ÉCRAN qu'on reprend, et la définition du canevas qui la suit (net.js).
   Tout est déclaré ICI, media queries comprises : poser le régime large 2 000 lignes plus bas (le
   bloc « formats larges » J252) rendrait la faute invisible en lisant le bloc du panneau — c'est
   exactement le piège payé en J253 sur `#actions-panel`. */
#pubcam-panel {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  z-index: 33;
  width: min(calc(100vw - 16px), 460px);
}
/* La règle de base AVANT les media queries qui la surchargent (J444) : écrite plus bas, à spécificité
   égale, elle les écrasait — la console n'a jamais eu son rack à droite de l'écran (piège J253). */
#pubcam-panel .surv-body { display: flex; flex-direction: column; gap: 8px; }
/* Au-delà de 700 px on a de quoi payer la gouttière de la colonne d'outils (68 px de chaque côté,
   le panneau étant CENTRÉ) ; en dessous, il prend toute la largeur et la colonne s'efface (patron
   J219 — pas de bouton fantôme sous un panneau). */
@media (min-width: 700px) {
  #pubcam-panel { width: min(calc(100vw - 136px), 760px); }
}
@media (min-width: 1040px) {
  /* Format écran : la dalle à gauche, le rack de sélection à droite, comme un vrai poste. */
  #pubcam-panel { width: min(calc(100vw - 136px), 1120px); }
  #pubcam-panel .surv-body { flex-direction: row; align-items: flex-start; gap: 12px; }
  #pubcam-panel .surv-rack { flex: 0 0 268px; max-height: 66vh; overflow-y: auto; }
  #pubcam-panel #micro-log { max-height: 260px; }
}
@media (max-width: 699px) {
  body:has(#pubcam-panel:not(.hidden)) #plan-btn,
  body:has(#pubcam-panel:not(.hidden)) #convo-btn,
  body:has(#pubcam-panel:not(.hidden)) #manual-btn { display: none; }
}
/* J185 : la vidéosurveillance ressemble à son objet — une console à moniteur CRT + rack. */
#pubcam-panel .surv-console {
  background: linear-gradient(160deg, #20242b, #12151b);
  border: 1px solid #333b44; border-radius: 14px; padding: 10px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  max-height: 84vh; overflow-y: auto;
}
#pubcam-panel .surv-head { display: flex; align-items: center; gap: 8px; font: 800 var(--fs-sm)/1 ui-monospace, Consolas, monospace; letter-spacing: 0.07em; color: #9fd0ee; padding: 2px 2px 8px; }
#pubcam-panel .surv-live { color: #37e08a; font-size: var(--fs-micro); animation: sv-blink 1.6s infinite; }
#pubcam-panel .surv-head .panel-x { position: static; margin-left: auto; color: #9fd0ee; background: none; border: none; cursor: pointer; font-size: var(--fs-lg); }
/* J268 — la dalle est bornée par la HAUTEUR disponible, jamais par un `max-height` sur `.surv-crt` :
   avec `aspect-ratio`, couper la hauteur laisse la largeur à 100 % et le canevas s'étire (visages
   ovales). On borne donc la largeur du caisson, et le rapport 4/3 reste vrai en toute circonstance. */
#pubcam-panel .surv-monitor {
  background: #0a0c10; border-radius: 10px; padding: 8px; border: 1px solid #2a323c;
  flex: 1 1 auto; width: 100%; min-width: 0; max-width: calc(66vh * 4 / 3); margin-inline: auto;
}
/* J254 — format ÉCRAN (4/3, comme la dalle d'un moniteur de vidéosurveillance) : le cadre était
   carré, ce qu'aucun poste de contrôle n'est. Le canevas est en 384×288, même rapport. */
#pubcam-panel .surv-crt { position: relative; border-radius: 8px; overflow: hidden; background: #05070a; aspect-ratio: 4 / 3; display: grid; place-items: center; box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.9); }
/* J268 : la DÉFINITION du canevas est recalée sur sa boîte (net.js `fitPubcamCanvas`), donc il n'y
   a plus de rééchelonnement à masquer — `image-rendering: pixelated` ne ferait que crénerer le
   rendu sur un écran à densité fractionnaire. */
#pubcam-panel #pubcam-canvas { display: block; width: 100%; height: 100%; }
#pubcam-panel .surv-osd { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 5px 8px; font: 700 var(--fs-micro)/1 ui-monospace, Consolas, monospace; letter-spacing: 0.08em; color: #bfe9c8; text-shadow: 0 0 4px rgba(0, 0, 0, 0.9); }
#pubcam-panel .surv-rec { color: #ff5b5b; animation: sv-blink 1s steps(2) infinite; }
#pubcam-panel .surv-cam { flex: 1; text-align: center; color: #dfeaff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pubcam-panel .surv-ch { color: #8fb0cc; }
#pubcam-panel .surv-scan { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px); animation: scan-roll 6s linear infinite; }
#pubcam-panel .surv-nosignal { position: absolute; color: #3d5a48; font: 700 var(--fs-sm) ui-monospace, Consolas, monospace; letter-spacing: 0.12em; }
#pubcam-panel button.cam-pick {
  display: block; width: 100%; margin: 4px 0; padding: 8px 10px; text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px;
  background: #191d24; color: #cfd6de; font-size: var(--fs-md); cursor: pointer;
}
#pubcam-panel button.cam-pick.active { border-color: #5aa8d8; color: #cfe9fb; background: #14202b; box-shadow: 0 0 0 1px rgba(90, 168, 216, 0.4); }
#pubcam-panel .surv-hint { margin-top: 8px; }
#pubcam-panel .surv-off {
  display: block; width: 100%; margin-top: 10px; padding: 9px;
  border: none; border-radius: 8px; background: #2b3540; color: #cfd6de; font-size: var(--fs-md); cursor: pointer;
}
#pubcam-panel .surv-off:hover { background: #34404d; }

/* ---- Salons (Jalon 73) ---- */
#room-row { display: flex; gap: 8px; }
#room-row select { flex: 1; }
#room-row #room-new {
  width: 44px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px;
  background: #26252d; color: #e8e8ec; font-size: var(--fs-lg); cursor: pointer;
}
#room-create-row { display: flex; gap: 8px; margin-top: 8px; }
#room-create-row.hidden { display: none; }
#room-create-row input {
  flex: 1; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px;
  background: #201f26; color: #e8e8ec; padding: 9px 10px; font-size: var(--fs-lg);
}
#room-create-row button {
  padding: 0 16px; border: none; border-radius: 8px;
  background: #e2b53b; color: #101014; font-weight: 700; cursor: pointer;
}

/* ---- Fiche d'inspection au survol (Jalon 72) ---- */
#inspect-card {
  position: fixed;
  z-index: 21;
  pointer-events: none;
  padding: 6px;
  border-radius: 10px;
  background: rgba(14, 14, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
#inspect-card canvas { display: block; border-radius: 6px; }

/* ---- Interrogatoire de garde à vue (Jalon 69) ---- */
#interro-panel, #answer-panel {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 90px);
  z-index: 35;
  width: min(92%, 380px);
  max-height: 64vh; overflow-y: auto;
  padding: 16px 18px; border-radius: 14px;
  background: rgba(14, 14, 20, 0.97);
  border: 1px solid rgba(107, 155, 216, 0.45);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.75);
  font-size: var(--fs-md);
}
#interro-panel h2, #answer-panel h2 { font-size: var(--fs-lg); color: #bfe3ff; margin-bottom: 8px; }
#interro-panel .empty, #answer-panel .empty { color: #9a9aa6; font-style: italic; margin-bottom: 6px; }
#interro-panel button, #answer-panel button {
  display: block; width: 100%; margin: 6px 0; padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px;
  background: #23222b; color: #e8e8ec; font-size: var(--fs-md); text-align: left;
  cursor: pointer; touch-action: manipulation;
}
#interro-panel button:disabled { opacity: 0.45; }
#interro-panel #interro-close { background: #6b9bd8; color: #101014; font-weight: 700; text-align: center; margin-top: 10px; }
#answer-panel button.silence { background: #3a3946; font-style: italic; }
.int-line { padding: 6px 8px; margin: 5px 0; border-radius: 8px; background: rgba(107, 155, 216, 0.1); border: 1px solid rgba(107, 155, 216, 0.25); line-height: 1.45; }
.int-line i { color: #e2b53b; }

/* ---- Tutoriel solo (Jalon 68) ---- */
#tuto-btn {
  display: block; width: 100%; margin-top: 10px; padding: 11px;
  border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: 12px;
  font-size: var(--fs-lg); color: #e8e8ec; background: rgba(255, 255, 255, 0.06);
  cursor: pointer; touch-action: manipulation;
}
#tuto-btn:active { transform: translateY(1px); }
#tuto-panel {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  top: calc(env(safe-area-inset-top, 0px) + 96px);
  z-index: 19;
  width: min(300px, 72vw);
  padding: 12px 14px; border-radius: 12px;
  background: rgba(16, 16, 22, 0.92);
  border: 1px solid rgba(226, 181, 59, 0.4);
  font-size: var(--fs-md); line-height: 1.5;
}
/* J294 — L'ÉCOLE. Ancré à GAUCHE comme la checklist du tutoriel, et pour la même raison : le
   coin droit est déjà la colonne d'outils, et un panneau ancré à droite passe par-dessus (piège
   J219). Largeur en `min(px, vw)` et jamais en `vw` seul — un panneau ancré à 12 px dont la
   largeur est en `vw` déborde du cadre sur mobile (piège J253, troisième occurrence).
   Il vit SOUS la checklist : les deux peuvent être à l'écran ensemble. */
/* J297 — QUITTER. En HAUT à droite, pas dans la colonne d'outils du bas : celle-ci est pleine.
   Ses assises permanentes vont de 12 à 362 par pas de 50 (🔊 ❔ 🎒 🪪 💬 🗺 🗨 📖) et les boutons
   contextuels occupent 342/406/470/534/598 par pas de 64 — les deux grilles ne s'emboîtent pas,
   et le seul creux restant chevauchait « Boire » à six pixels près. Le coin haut-droit, lui, est
   libre jusqu'à 90 px (🔎/📒) : le HUD est ancré à GAUCHE (J149) et les badges sont centrés.
   `position: fixed` est aussi indispensable que le z-index : sans lui l'élément reste `static`,
   le z-index ne s'applique même pas, le canvas plein cadre le recouvre — le bouton est dans le
   DOM, il a sa boîte, et il est INCLIQUABLE. C'est le défaut que le banc J297 a trouvé.
   z-index 26 : le fond estompé des modals est à 25 (piège J210). Sortir du jeu doit rester
   possible même quand un panneau est ouvert — c'est justement là qu'on veut sortir. */
#quit-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  z-index: 26;
  width: 44px; height: 44px;
  border: 1px solid rgba(226, 59, 90, 0.35);
  border-radius: 12px;
  background: rgba(28, 14, 18, 0.85);
  font-size: var(--fs-xl);
  cursor: pointer; touch-action: manipulation;
}

#ecole-panel {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  z-index: 19;
  width: min(320px, calc(100vw - 24px));
  padding: 12px 14px; border-radius: 12px;
  background: rgba(16, 16, 22, 0.94);
  border: 1px solid rgba(186, 128, 232, 0.45);
  font-size: var(--fs-md); line-height: 1.5;
}
#ecole-panel h3 { font-size: var(--fs-lg); color: #ba80e8; margin-bottom: 6px; }
#ecole-panel .ec-prog { font-size: var(--fs-xs); color: #9aa0b5; margin-bottom: 6px; letter-spacing: 0.04em; }
#ecole-panel .ec-consigne { color: #f0eefa; }
#ecole-panel .ec-aide { font-size: var(--fs-sm); color: #9aa0b5; margin-top: 6px; font-style: italic; }
#ecole-panel .ec-fini { color: #6ee7a8; }
/* Le guide rendu à la fin (dans l'overlay commun) : une règle par étape, la consigne au-dessus. */
.ec-guide { margin-bottom: 14px; }
.ec-guide .ec-g-tete { color: #ba80e8; font-weight: 700; }
.ec-guide .ec-g-rate { color: #9aa0b5; }
.ec-guide .ec-g-pourquoi { display: block; margin-top: 3px; color: #d8d4e6; }

#tuto-panel h3 { font-size: var(--fs-lg); color: #e2b53b; margin-bottom: 6px; }
#tuto-panel .ok { color: #6ee7a8; }
#tuto-panel .todo { color: #c6c6d0; }
#tuto-panel .tip { margin-top: 8px; font-size: var(--fs-sm); color: #9a9aa6; font-style: italic; }

/* ---- J252 : panneaux déplaçables ----
 * L'en-tête est la poignée. `touch-action: none` est indispensable sur mobile : sans lui, le
 * navigateur interprète le glissement comme un défilement et le panneau ne bouge jamais. */
[id$="-panel"] > h2,
[id$="-panel"] > h3,
#phone-panel .phone-status {
  cursor: move;
  touch-action: none;
  user-select: none;
}
/* Un panneau déplacé est positionné en pixels : il ne doit plus subir l'animation d'ouverture,
 * qui anime justement le `transform` et écraserait le `transform: none` posé en ligne. */
.panel-moved { animation: none !important; }

/* ---- J251 : la nouveauté du Dossier ----
 * La pastille du bouton 🔎 disait « il y a du neuf » ; dedans, rien ne disait LAQUELLE. */
.cb-neuf {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 4px; padding: 8px 12px;
  border-radius: 10px;
  background: rgba(226, 181, 59, 0.12);
  border: 1px solid rgba(226, 181, 59, 0.35);
  color: #f4e3b6; font-size: var(--fs-md);
}
.cb-neuf-pastille {
  flex: none; min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; background: #e2b53b; color: #17140b;
  font-weight: 800; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.cb-neuf button {
  margin-left: auto; flex: none;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid rgba(226, 181, 59, 0.5);
  background: rgba(226, 181, 59, 0.16); color: #f4e3b6;
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.idx-card.idx-neuf {
  border-color: rgba(226, 181, 59, 0.6);
  box-shadow: 0 0 0 1px rgba(226, 181, 59, 0.25) inset;
}
.idx-badge {
  position: absolute; top: -8px; left: 10px;
  padding: 1px 7px; border-radius: 999px;
  background: #e2b53b; color: #17140b;
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.02em;
}

/* ---- J251 : ce qu'on attend de toi, en permanence à gauche ----
 * Même ancrage que la checklist du tutoriel (qui prime et le masque). Discret par défaut : c'est
 * un rappel, pas un panneau — d'où la largeur contenue et le repli mémorisé. */
#goals-panel {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  top: calc(env(safe-area-inset-top, 0px) + 96px);
  z-index: 19;
  width: min(272px, 68vw);
  padding: 10px 12px 11px;
  border-radius: 12px;
  background: rgba(16, 16, 22, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-md); line-height: 1.45;
}
#goals-panel h3 {
  font-size: var(--fs-sm); letter-spacing: 0.02em; text-transform: uppercase;
  color: #9a9aa6; margin: 0 0 8px;
  cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#goals-panel.gl-plie h3 { margin-bottom: 0; }
#goals-panel.gl-plie .gl-body { display: none; }
.gl-chev { font-size: var(--fs-xs); color: #6f6f7c; }
.gl-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; color: #d6d6de; }
.gl-ico { flex: none; width: 16px; text-align: center; }
.gl-txt { flex: 1 1 auto; min-width: 0; }
.gl-sub { display: block; font-size: var(--fs-xs); color: #8a8a96; }
/* Largeur fixe + chiffres tabulaires : sans ça la ligne danse à chaque minute (piège J149). */
.gl-num { flex: none; min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; color: #9a9aa6; }
.gl-ok { color: #6ee7a8; }
.gl-ok .gl-num { color: #6ee7a8; }
.gl-bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); margin: 2px 0 7px 24px; overflow: hidden; }
.gl-fill { height: 100%; background: #e2b53b; transition: width 0.4s ease-out; }
.gl-ok + .gl-bar .gl-fill { background: #6ee7a8; }
@media (max-width: 700px) { #goals-panel { font-size: var(--fs-sm); top: calc(env(safe-area-inset-top, 0px) + 84px); } }

/* ---- Menu d'actions contextuel (Jalon 61) ---- */
#actions-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 76px); /* J125 : en bas, à gauche de la colonne de boutons */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 23;
  padding: 14px 22px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #fff; background: #4a3a7a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#actions-btn:active { transform: translateY(1px); }
/* J150 : badge compteur de largeur fixe → le bouton ⚡ garde une largeur constante.
   box-sizing:border-box + min-width en px : la boîte tient DEUX chiffres (padding compris),
   donc passer de « 9 » à « 12 » ne fait plus grandir le bouton. */
#actions-btn .act-count {
  display: inline-block; box-sizing: border-box;
  min-width: 30px; margin-left: 9px;
  padding: 1px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.22); color: #fff;
  font-size: var(--fs-sm); font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
#actions-btn .act-count:empty { display: none; }
#actions-panel {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 76px); /* J125 : la liste se déplie au-dessus du bouton ⚡ */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
  z-index: 31;
  /* Ancré à 76 px du bord : la largeur doit défalquer l'ancrage (J219/J230), sinon débord. */
  width: min(330px, calc(100vw - 88px));
  max-height: 56vh; overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(16, 16, 22, 0.97);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  color: #e2e2ea;
}
#actions-panel h2 { font-size: var(--fs-lg); margin-bottom: 6px; color: #cfc3ff; }
#actions-panel .act-row {
  padding: 10px 10px; margin: 4px 0;
  border-radius: 10px; font-size: var(--fs-md); font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer; touch-action: manipulation;
}
#actions-panel .act-row:active { background: rgba(255, 255, 255, 0.14); }

/* ---- Lobby ---- */
#lobby {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: min(92%, 340px);
  padding: 16px 18px;
  border-radius: 16px;
  text-align: center;
  background: rgba(16, 16, 24, 0.94);
  border: 1px solid rgba(226, 181, 59, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
#lobby .lobby-title { font-size: var(--fs-lg); font-weight: 700; color: #e2b53b; }
#lobby .lobby-count { font-size: 26px; font-weight: 800; margin: 6px 0; }
#lobby .lobby-hint { font-size: var(--fs-sm); color: #b6b6c0; margin-bottom: 12px; line-height: 1.4; }
#lobby-start {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #101014;
  background: #e2b53b;
  cursor: pointer;
  touch-action: manipulation;
}
#lobby-start:disabled { opacity: 0.5; cursor: default; }
.lobby-settings { display: flex; gap: 10px; justify-content: center; margin: 10px 0 4px; }
.lobby-settings label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); color: #b6b6c0; font-weight: 600; }
.lobby-settings select {
  padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.14);
  background: #16161e; color: #e8e8ec; font-size: var(--fs-lg); appearance: none;
}

/* ---- Badge Enquêteur ---- */
#investigator-badge {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 52px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: #bfe3ff;
  background: rgba(12, 32, 52, 0.85);
  border: 1px solid rgba(59, 160, 226, 0.6);
}
/* Si Kira ET enquêteur, décale le badge cellule sous le badge Kira. */
#kira-badge:not(.hidden) ~ #investigator-badge { top: calc(env(safe-area-inset-top, 0px) + 88px); }

#complice-badge {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 52px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: #ffe9c9;
  background: rgba(60, 34, 10, 0.85);
  border: 1px solid rgba(226, 150, 59, 0.6);
  box-shadow: 0 0 16px rgba(226, 150, 59, 0.35);
}
#complice-badge:not(.hidden) ~ #investigator-badge { top: calc(env(safe-area-inset-top, 0px) + 88px); }

/* ---- Boutons cellule ---- */
#weapon-btn {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 214px);
  transform: translateX(-50%);
  z-index: 22;
  padding: 12px 20px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #fff; background: #6b5510;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#casebook-panel .vote-row { display: flex; gap: 8px; margin: 8px 0; }
#casebook-panel .vote-row button {
  flex: 1; border: none; border-radius: 10px; padding: 9px 10px;
  font-size: var(--fs-md); font-weight: 700; cursor: pointer; touch-action: manipulation;
}
#casebook-panel #vote-yes { color: #0f1a12; background: #6ee7a8; }
#casebook-panel #vote-no { color: #fff; background: #b23048; }

#joincell-btn {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
  transform: translateX(-50%);
  z-index: 22;
  padding: 12px 20px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #fff; background: #2c6fb0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#police-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 214px);
  z-index: 22;
  padding: 12px 20px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 800;
  color: #fff; background: #b23048;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#interrogate-btn {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
  z-index: 22;
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #101014; background: #8fb8c9;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#camera-btn {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 342px);
  z-index: 22;
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #101014; background: #c9b48f;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#camera-btn:active { transform: translateY(1px); }
#micro-btn {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 534px);
  z-index: 22;
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #f0e8ff; background: #4b3a6b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#micro-btn:active { transform: translateY(1px); }
#volunteer-btn {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 598px);
  z-index: 22;
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #fff; background: #7a3550;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#volunteer-btn:active { transform: translateY(1px); }
#hide-btn {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 266px);
  transform: translateX(-50%);
  z-index: 22;
  padding: 12px 20px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #ffd9e0; background: #3c1420;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#hide-btn:active { transform: translateY(1px); }
#deepsearch-btn {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 662px);
  z-index: 22;
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #101014; background: #9fc3d9;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#deepsearch-btn:active { transform: translateY(1px); }
#warrant-btn {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 266px);
  transform: translateX(-50%);
  z-index: 22;
  padding: 12px 20px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #fff; background: #4a5a2a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#warrant-btn:active { transform: translateY(1px); }
#track-btn {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 406px);
  z-index: 22;
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #101014; background: #a7c98f;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#track-btn:active { transform: translateY(1px); }
#search-btn {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 470px);
  z-index: 22;
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #101014; background: #cfa9c9;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#search-btn:active { transform: translateY(1px); }
#home-pill { color: #d8f0d8; background: rgba(30, 60, 34, 0.9); border: 1px solid rgba(120, 200, 130, 0.4); }
#needs-pill { color: #e8e2d0; background: rgba(40, 36, 24, 0.9); border: 1px solid rgba(200, 180, 120, 0.35); }
#needs-pill.warn { color: #ffd9c9; background: rgba(70, 30, 16, 0.92); border-color: rgba(226, 116, 59, 0.55); }
#level-pill { color: #d0e2ff; background: rgba(22, 34, 60, 0.92); border: 1px solid rgba(120, 160, 240, 0.4); }
#rule-pill { color: #ffd9e0; background: rgba(60, 10, 20, 0.92); border: 1px solid rgba(226, 59, 90, 0.6); font-weight: 700; }
#notebook-panel #abandon-btn, #casebook-panel #rule-test-btn {
  width: 100%; margin: 6px 0; border: none; border-radius: 10px; padding: 9px 10px;
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer; touch-action: manipulation;
  color: #ffd9e0; background: #3c1420;
}
#casebook-panel #rule-test-btn { color: #101014; background: #cfd9a0; }
#stairs-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 512px);
  z-index: 26; /* J297 : le fond estompé des modals est à 25 — à 22 ce bouton
     devenait incliquable dès qu'un panneau s'ouvrait (piège J210, jamais rattrapé sur lui). */
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #fff; background: #2e4a7a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#stairs-btn:active { transform: translateY(1px); }
#frisk-btn {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 726px);
  z-index: 22;
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #101014; background: #d9b8a0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#frisk-btn:active { transform: translateY(1px); }
#bin-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 612px);
  z-index: 26; /* J297 : le fond estompé des modals est à 25 — à 22 ce bouton
     devenait incliquable dès qu'un panneau s'ouvrait (piège J210, jamais rattrapé sur lui). */
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #e8e8ec; background: #3a4a3a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#bin-btn:active { transform: translateY(1px); }
#inv-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 112px);
  z-index: 26; /* J210 : au-dessus du fond estompé (25) */
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(20, 20, 28, 0.85);
  font-size: var(--fs-xl);
  cursor: pointer;
  touch-action: manipulation;
}
#inv-panel {
  position: fixed;
  /* J219 — le panneau garde la GOUTTIÈRE de la colonne d'outils (44 px de bouton + 2×12 de marge).
     Élargi à 560 px en J210, il était ancré au même bord que la colonne et recouvrait 🗨️ et 🗺️ :
     les deux icônes disparaissaient derrière lui dès qu'on ouvrait l'inventaire — c'est ce que
     l'on prenait pour des « icônes noires ». Tout panneau ancré à droite doit garder cette marge. */
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 206px); /* au-dessus du bouton ⚡ Actions */
  z-index: 30;
  /* J210 — l'inventaire était étriqué sans raison : il montre un avatar, des emplacements et une
     liste d'objets avec leurs boutons. Il prend maintenant la place qu'il lui faut. */
  width: min(560px, calc(100vw - 24px));
  max-height: 78vh; overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(16, 16, 22, 0.96);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  color: #d7d7de;
}
/* J219 — la gouttière n'est réservée que quand l'écran est assez large pour la payer. Réserver
   56 px en toute circonstance faisait tomber le panneau à 283 px sur un mobile de 375 px, soit
   MOINS qu'avant son élargissement : la correction d'un retour en aurait cassé un autre. En
   dessous du seuil, le panneau reprend toute la largeur et la colonne d'outils s'efface (voir
   la règle `body:has(...)` plus bas) — on ne laisse pas de boutons fantômes sous un panneau. */
@media (min-width: 700px) {
  #inv-panel, #keys-panel { right: calc(env(safe-area-inset-right, 0px) + 68px); }
  #inv-panel { width: min(560px, calc(100vw - 92px)); }
  #keys-panel { width: min(340px, calc(100vw - 92px)); }
}
@media (max-width: 699px) {
  body:has(#inv-panel:not(.hidden)) #plan-btn,
  body:has(#inv-panel:not(.hidden)) #convo-btn,
  body:has(#keys-panel:not(.hidden)) #plan-btn,
  body:has(#keys-panel:not(.hidden)) #convo-btn { display: none; }
}
#inv-panel h2 { font-size: var(--fs-xl); margin-bottom: 8px; color: #e8d8b0; }
#inv-panel .empty { color: #9a9aa6; font-size: var(--fs-sm); font-style: italic; margin-top: 8px; }
#inv-panel .obj { font-size: var(--fs-lg); margin: 7px 0; }
#inv-panel .inv-row { display: flex; align-items: center; gap: 8px; margin: 9px 0; font-size: var(--fs-lg); }
#inv-panel .inv-row span { flex: 1; }
#inv-panel .inv-row button {
  border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 7px 11px;
  font-size: var(--fs-md); font-weight: 700; cursor: pointer; touch-action: manipulation;
  background: rgba(255,255,255,0.06); color: #b6b6c0;
}
#inv-panel .inv-row button.active { background: #e2b53b; color: #101014; border-color: transparent; }
#inv-panel .inv-row button.discard { background: rgba(226, 59, 90, 0.18); color: #ffb9c9; border-color: rgba(226, 59, 90, 0.4); }
#casebook-panel .lab-send {
  border: none; border-radius: 8px; padding: 3px 8px; margin-left: 6px;
  font-size: var(--fs-xs); font-weight: 700; cursor: pointer; touch-action: manipulation;
  color: #101014; background: #9fc3d9;
}
#inv-panel #craft-fake-btn {
  width: 100%; margin-top: 8px; border: none; border-radius: 10px; padding: 9px 10px;
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer; touch-action: manipulation;
  color: #101014; background: #c9b48f;
}
#notebook-panel .tear-row { display: flex; gap: 6px; margin: 6px 0; }
#notebook-panel .tear-row button {
  flex: 1; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; padding: 7px 6px;
  font-size: var(--fs-xs); font-weight: 700; cursor: pointer; touch-action: manipulation;
  background: rgba(255,255,255,0.07); color: #e8e8ec;
}
#eat-btn, #drink-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 26; /* J297 : le fond estompé des modals est à 25 — à 22 ces boutons devenaient
     incliquables dès qu'un panneau s'ouvrait (piège J210, jamais rattrapé sur eux). */
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #101014; background: #e0c98f;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#eat-btn { bottom: calc(env(safe-area-inset-bottom, 0px) + 412px); }
#drink-btn { bottom: calc(env(safe-area-inset-bottom, 0px) + 462px); }
#eat-btn:active, #drink-btn:active { transform: translateY(1px); }
#fruit-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 562px);
  z-index: 26; /* J297 : le fond estompé des modals est à 25 — à 22 ce bouton
     devenait incliquable dès qu'un panneau s'ouvrait (piège J210, jamais rattrapé sur lui). */
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #101014; background: #a8d98f;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#fruit-btn:active { transform: translateY(1px); }
#carnet-pill { color: #ffd9e0; background: rgba(40, 14, 22, 0.92); border: 1px solid rgba(226, 59, 90, 0.5); }
#notebook-panel #give-notebook-btn {
  display: block; width: 100%; margin: 8px 0; padding: 9px 12px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 10px;
  font-size: var(--fs-md); font-weight: 700; color: #ffd9e0; background: rgba(226, 59, 90, 0.12);
  cursor: pointer; touch-action: manipulation;
}
#transmit-btn {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 214px);
  z-index: 22;
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #101014; background: #e2963b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#transmit-btn:active { transform: translateY(1px); }
#recruit-btn {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 214px);
  transform: translateX(-50%);
  z-index: 22;
  padding: 12px 20px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #ffd9e0; background: #4a1a28;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#recruit-btn:active { transform: translate(-50%, 1px); }
#arrest-btn {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 278px);
  z-index: 22;
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #fff; background: #3f6ea8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#arrest-btn:active { transform: translateY(1px); }
#jail-pill { color: #ffd0d0; background: rgba(80, 20, 24, 0.9); border: 1px solid rgba(226, 59, 90, 0.5); }
/* J297 — LES DEUX CARNETS PEUVENT COEXISTER, ET ILS ÉTAIENT SUPERPOSÉS. Un Kira infiltré dans la
   cellule (J194/J229 — cas explicitement supporté) porte 🖤 Carnet ET 🔎 Dossier : tous deux
   posés à 90 px du haut, exactement l'un sur l'autre, celui du dessous incliquable. Le Dossier
   descend d'un cran quand le carnet est là. Patron déjà utilisé pour les badges de rôle
   (`#kira-badge:not(.hidden) ~ #investigator-badge`), et l'ordre du DOM le permet : `#notebook-btn`
   précède `#casebook-btn` dans `index.html`. */
#notebook-btn:not(.hidden) ~ #casebook-btn { top: calc(env(safe-area-inset-top, 0px) + 140px); }
#casebook-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  top: calc(env(safe-area-inset-top, 0px) + 90px);
  z-index: 26; /* J210 : au-dessus du fond estompé (25) */
  padding: 10px 14px;
  border: 1px solid rgba(59, 160, 226, 0.5);
  border-radius: 12px;
  background: rgba(12, 28, 44, 0.9);
  color: #bfe3ff; font-size: var(--fs-lg); font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}
#casebook-panel {
  position: fixed;
  /* J151 : le Dossier d'enquête rejoint la famille « document = modal CENTRÉ ». Il s'ouvrait
     en coin ; centré, le classeur est lisible d'un bloc, comme le Fichier et le Registre. */
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 26;
  width: min(94vw, 560px);
  max-height: 84vh; overflow-y: auto;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(10, 16, 24, 0.97);
  border: 1px solid rgba(59, 160, 226, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
  font-size: var(--fs-md);
}
#casebook-panel h2 { font-size: var(--fs-lg); margin-bottom: 8px; color: #bfe3ff; }
#casebook-panel .empty { color: #9a9aa6; font-style: italic; }
#casebook-panel .hints { margin-bottom: 4px; }
#casebook-panel .hint { padding: 5px 8px; margin: 4px 0; border-radius: 8px; background: rgba(59,160,226,0.12); border: 1px solid rgba(59,160,226,0.25); color: #d6ecfb; font-size: var(--fs-sm); line-height: 1.35; }
#casebook-panel .death { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
#casebook-panel .death .nm { font-weight: 600; }
#casebook-panel .death .meta { color: #9a9aa6; font-size: var(--fs-sm); }

/* ---- Gazette du village (Jalon 66) ---- */
#gazette-panel {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 90px);
  z-index: 34;
  width: min(92%, 380px);
  max-height: 64vh; overflow-y: auto;
  padding: 16px 18px; border-radius: 14px;
  background: #efe8d8; color: #26221a;
  border: 1px solid #b8ab8d;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.75);
  font-size: var(--fs-md);
  font-family: Georgia, 'Times New Roman', serif;
}
#gazette-panel h2 { font-size: var(--fs-xl); margin-bottom: 8px; text-align: center; border-bottom: 2px solid #26221a; padding-bottom: 6px; }
#gazette-panel .empty { font-style: italic; color: #6d6553; }
#gazette-panel .edition { margin: 10px 0; }
#gazette-panel .ed-title { font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: #6d6553; margin-bottom: 4px; }
#gazette-panel .brief { padding: 4px 0; border-bottom: 1px dotted #b8ab8d; line-height: 1.4; }
#gazette-panel #gazette-close {
  display: block; margin: 12px auto 0; padding: 8px 22px;
  border: 1px solid #26221a; border-radius: 8px;
  background: #26221a; color: #efe8d8; font-size: var(--fs-md);
}

/* ---- Écran de fin ---- */
#gameover-screen {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 6, 10, 0.9); backdrop-filter: blur(4px);
  padding: 20px;
}
#gameover-card {
  text-align: center; max-width: 420px;
  padding: 28px; border-radius: 18px;
  background: rgba(20, 20, 28, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
#gameover-card h2 { font-size: 26px; margin-bottom: 10px; }
#gameover-card.kira h2 { color: #e23b5a; }
#gameover-card.investigators h2 { color: #6ee7a8; }
/* J317 : une partie interrompue n'a pas de vainqueur — ni le rouge de Kira, ni le vert de la
   cellule. Un gris chaud, neutre, qui ne félicite personne. Contraste vérifié (J253) : 8,4:1
   sur le fond de la carte. */
#gameover-card.interrompue h2 { color: #d8d2c6; }
#gameover-card p { color: #c6c6d0; line-height: 1.5; }
#gameover-card .reveal { margin-top: 12px; font-weight: 700; color: #e2b53b; }
#gameover-card .go-obj { margin: 12px 0 6px; text-align: left; display: inline-block; }
#gameover-card .go-obj div { font-size: var(--fs-md); margin: 3px 0; }
#gameover-card .go-obj .ok { color: #6ee7a8; }
#gameover-card .go-obj .ko { color: #e2743b; }
#gameover-card .go-stats { margin-top: 10px; font-size: var(--fs-md); color: #9a9aa6; }
/* Replay de fin (Jalon 67) : frise chronologique de la partie. */
#gameover-card .go-timeline {
  margin-top: 14px; text-align: left;
  max-height: 30vh; overflow-y: auto;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#gameover-card .go-timeline h3 { font-size: var(--fs-md); margin-bottom: 6px; color: #e2b53b; }
#gameover-card .tl-ev { font-size: var(--fs-md); line-height: 1.45; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
#gameover-card .tl-ev .tl-t { color: #9a9aa6; font-variant-numeric: tabular-nums; margin-right: 6px; }
#replay-btn {
  display: block; width: 100%; margin-top: 18px; padding: 13px;
  border: none; border-radius: 12px; font-size: var(--fs-lg); font-weight: 700;
  color: #101014; background: #e2b53b; cursor: pointer; touch-action: manipulation;
}
#replay-btn:active { transform: translateY(1px); }

/* ---- Bouton « Enquêter » ---- */
#investigate-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 152px);
  z-index: 22;
  padding: 12px 20px;
  border: none;
  border-radius: 14px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #101014;
  background: #3ba0e2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  touch-action: manipulation;
}
#investigate-btn:active { transform: translateY(1px); }

/* ---- Bouton « Consulter » (média) ---- */
#media-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 276px);
  z-index: 22;
  padding: 12px 20px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #101014; background: #9db38c;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#media-btn:active { transform: translateY(1px); }

/* ---- Bouton « Rallier Kira » (message codé sur un média) ---- */
#signal-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 340px);
  z-index: 22;
  padding: 12px 20px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #f4dde4; background: #3a2030;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#signal-btn:active { transform: translateY(1px); }

/* ---- Bouton « Leurre » (appât médiatique, cellule) ---- */
#bait-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 404px);
  z-index: 22;
  padding: 12px 18px;
  border: none; border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #101014; background: #c9a24a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#bait-btn:active { transform: translateY(1px); }

/* ---- Carnet (Kira) ---- */
#notebook-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  top: calc(env(safe-area-inset-top, 0px) + 90px);
  z-index: 26; /* J210 : au-dessus du fond estompé (25) */
  padding: 10px 14px;
  border: 1px solid rgba(226, 59, 90, 0.5);
  border-radius: 12px;
  background: rgba(40, 10, 18, 0.9);
  color: #ffd9e0;
  font-size: var(--fs-lg);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
#notebook-panel {
  position: fixed;
  /* J151 : le Death Note rejoint la famille « document = modal CENTRÉ » (comme le Fichier,
     le Registre, le Plan…). Il s'ouvrait en coin, bridé à 320 px — un livre à deux pages
     y était à l'étroit. Centré et élargi, il prend enfin la place de l'objet immersif. */
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 26;
  width: min(94vw, 620px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(16, 10, 14, 0.97);
  border: 1px solid rgba(226, 59, 90, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
  font-size: var(--fs-md);
}
#notebook-panel h2 { font-size: var(--fs-lg); margin-bottom: 8px; color: #ffd9e0; }
#notebook-panel .obj { margin: 4px 0; color: #d7d7de; }
#notebook-panel .obj.ok { color: #6ee7a8; }
#notebook-panel .obj.ko { color: #e2743b; }
#notebook-panel .sep { margin: 10px 0 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); color: #9a9aa6; font-weight: 600; }
#notebook-panel .empty { color: #9a9aa6; font-style: italic; }
#notebook-panel .target { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; }
#notebook-panel .target .nm { font-weight: 600; }
#notebook-panel .target .crim { color: #e2743b; font-size: var(--fs-xs); }
#notebook-panel .target button {
  border: none; border-radius: 8px; padding: 6px 10px; font-size: var(--fs-sm); font-weight: 700;
  color: #101014; background: #e2b53b; cursor: pointer;
}
#notebook-panel .target button:disabled { opacity: 0.5; }
/* J253 — ces deux boutons de pleine largeur n'avaient AUCUNE règle : ils héritaient du 13,3 px
   par défaut de Chromium pour un `<button>`, hors échelle et plus petit que le texte voisin. */
#notebook-panel #take-eyes-btn, #notebook-panel #give-notebook-btn {
  display: block; width: 100%; margin: 8px 0 2px;
  border: 1px solid rgba(226, 181, 59, 0.45); border-radius: 8px; padding: 8px 10px;
  font-size: var(--fs-md); font-weight: 600; text-align: left;
  color: #f0dfae; background: rgba(226, 181, 59, 0.12); cursor: pointer;
}
#notebook-panel #take-eyes-btn:hover, #notebook-panel #give-notebook-btn:hover { background: rgba(226, 181, 59, 0.22); }
#notebook-panel .rally { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; color: #d7d7de; }
#notebook-panel .rally .nm { font-weight: 600; color: #ffd9e0; }
#notebook-panel .rally .unk { font-style: italic; color: #b79aa6; }
#notebook-panel .rally .zone { color: #9a9aa6; font-size: var(--fs-sm); }
#notebook-panel .rally button.recruit {
  flex: none; border: none; border-radius: 8px; padding: 5px 10px;
  font-size: var(--fs-sm); font-weight: 700; color: #101014; background: #e2963b;
  cursor: pointer; touch-action: manipulation;
}

/* ---- Écran de mort ---- */
#death-screen {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 6, 10, 0.82); backdrop-filter: blur(3px);
}
#death-card { text-align: center; color: #e8e8ec; padding: 24px; }
#death-card .death-emoji { font-size: 54px; }
#death-card h2 { font-size: 24px; margin: 8px 0; color: #e23b5a; }
#death-card p { color: #b6b6c0; }

/* ---- Bouton de suivi (spectateur) ---- */
#spectate-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 90px);
  z-index: 22;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #e8e8ec; background: rgba(20, 20, 28, 0.9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
  max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#spectate-btn:active { transform: translateY(1px); }

#ghost-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 76px);   /* J484 : il recouvrait 🎒 et 👤 */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
  z-index: 22;
  padding: 12px 18px;
  border: 1px solid rgba(180, 180, 220, 0.25);
  border-radius: 14px;
  font-size: var(--fs-lg); font-weight: 700;
  color: #e8e8f4; background: rgba(40, 40, 60, 0.9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer; touch-action: manipulation;
}
#ghost-btn:active { transform: translateY(1px); }

#spectate-panel {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
  z-index: 30;
  width: min(300px, 84vw);
  max-height: 55vh; overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(16, 16, 22, 0.96);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  color: #d7d7de;
}
#spectate-panel h2 { font-size: var(--fs-lg); margin-bottom: 8px; color: #cfe3ff; }
#spectate-panel .sep { margin: 8px 0 4px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.1); color: #9a9aa6; font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; }
#spectate-panel .empty { color: #9a9aa6; font-style: italic; font-size: var(--fs-sm); }
#spectate-panel .spec-row { padding: 7px 8px; border-radius: 8px; font-size: var(--fs-md); cursor: pointer; }
#spectate-panel .spec-row:hover { background: rgba(255,255,255,0.07); }
#spectate-panel .spec-row.active { background: rgba(107,155,216,0.18); color: #cfe3ff; font-weight: 600; }

/* ---- Bandeau spectateur ---- */
#spectator-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 52px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: #cfcfd8;
  background: rgba(20, 20, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---- Bouton profil ---- */
#profile-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px); /* J129 : la carte d'identité rejoint la colonne de droite */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 162px);
  z-index: 26; /* J210 : au-dessus du fond estompé (25) */
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(20, 20, 28, 0.85);
  font-size: 20px;
  cursor: pointer;
  touch-action: manipulation;
}

/* ---- Panneau pgame ---- */
#profile-panel {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 90px);
  transform: translateX(-50%);
  z-index: 24;
  width: min(92%, 360px);
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(14, 16, 24, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  font-size: var(--fs-md);
  line-height: 1.5;
}
#profile-panel h2 { font-size: var(--fs-lg); margin-bottom: 6px; }
#profile-panel .row { display: flex; justify-content: space-between; gap: 12px; }
#profile-panel .row span:first-child { color: #9a9aa6; }
#profile-panel .row span:last-child { text-align: right; font-weight: 600; }
/* Jauges de caractère (J235) : la barre prend la place restante, le chiffre reste aligné à droite
   en chasse fixe pour que les lignes ne dansent pas d'une valeur à l'autre (leçon J149). */
#profile-panel .row.gauge { align-items: center; gap: 8px; }
#profile-panel .row.gauge span:first-child { flex: 0 0 84px; }
#profile-panel .gauge-bar { flex: 1 1 auto; height: 8px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.10); overflow: hidden; display: block; min-width: 40px; }
#profile-panel .gauge-bar i { display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #6f7bd6, #b06fd6); }
#profile-panel .gauge-n { flex: 0 0 38px; text-align: right; font-variant-numeric: tabular-nums;
  color: #c8c8d4; font-weight: 600; }
#profile-panel .bg { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); color: #cfcfd8; font-style: italic; }
#profile-panel .sep { margin: 10px 0 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); color: #9a9aa6; font-weight: 600; }

/* ---- Écran de création ---- */
#create-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  /* J484 : centré par les MARGES de la carte, pas par `align-items: center` — une carte plus haute
   * que l'écran (720p, mobile en paysage) débordait des deux côtés, et le haut (le titre) était hors
   * de portée du défilement. Une marge automatique tombe à zéro quand la place manque. */
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(120% 120% at 50% 0%, #1a1420 0%, #0b0b10 70%);
  overflow-y: auto;
}
#create-card {
  margin: auto 0;
  width: min(100%, 420px);
  background: rgba(20, 20, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 24px;
}
#create-card h1 {
  font-size: 30px;
  letter-spacing: 1px;
  margin-bottom: 6px;
  background: linear-gradient(90deg, #e23b5a, #e2b53b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#create-card .subtitle { color: #b6b6c0; font-size: var(--fs-md); line-height: 1.5; margin-bottom: 18px; }
#create-card label { display: block; font-size: var(--fs-sm); color: #9a9aa6; margin: 12px 0 5px; font-weight: 600; }
#create-card select {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #16161e;
  color: #e8e8ec;
  font-size: var(--fs-lg);
  appearance: none;
}
/* Carte de profil P1 (J196) : aperçu vivant des choix du formulaire. */
#p1-preview {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(14, 16, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
#p1-preview .p1-fig { position: relative; flex: 0 0 auto; }
#p1-silhouette {
  width: 96px; height: 144px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  image-rendering: pixelated;
  display: block;
}
#p1-flip {
  position: absolute; right: -6px; bottom: -6px;
  width: 28px; height: 28px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #16161e; color: #e8e8ec;
  font-size: var(--fs-lg); line-height: 1; cursor: pointer;
  touch-action: manipulation;
}
#p1-preview .p1-info { flex: 1 1 auto; min-width: 0; font-size: var(--fs-md); line-height: 1.5; }
#p1-preview .p1-name {
  font-size: var(--fs-lg); font-weight: 700; margin-bottom: 6px;
  background: linear-gradient(90deg, #e23b5a, #e2b53b);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#p1-preview .row { display: flex; justify-content: space-between; gap: 10px; }
#p1-preview .row span:first-child { color: #9a9aa6; }
#p1-preview .row span:last-child { text-align: right; font-weight: 600; }
#p1-preview .p1-note {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #8a8a94; font-size: var(--fs-xs); font-style: italic; line-height: 1.45;
}

#create-start {
  width: 100%;
  margin-top: 22px;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #e23b5a, #b23048);
  cursor: pointer;
  touch-action: manipulation;
}
#create-start:disabled { opacity: 0.6; cursor: default; }
.create-status { margin-top: 12px; font-size: var(--fs-sm); color: #e2b53b; text-align: center; min-height: 16px; }
.rules-open {
  width: 100%; margin-top: 10px; padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px;
  font-size: var(--fs-lg); font-weight: 700; color: #e8e8ec; background: rgba(255,255,255,0.05);
  cursor: pointer; touch-action: manipulation;
}

/* ---- Écran de règles (onboarding) ---- */
#rules-screen {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(120% 120% at 50% 0%, #1a1420 0%, #0b0b10 70%);
  overflow-y: auto;
}
#rules-card {
  width: min(100%, 460px); max-height: 92vh; overflow-y: auto;
  background: rgba(20, 20, 28, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; padding: 24px;
}
#rules-card h1 {
  font-size: 24px; margin-bottom: 10px;
  background: linear-gradient(90deg, #e23b5a, #e2b53b);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#rules-card p { color: #c4c4ce; font-size: var(--fs-md); line-height: 1.55; margin-bottom: 6px; }
#rules-card .rules-lead { color: #b6b6c0; margin-bottom: 12px; }
#rules-card .rules-sec { margin: 14px 0 4px; font-size: var(--fs-lg); font-weight: 800; color: #f0e9d8; }
#rules-card b { color: #ececf2; }
#rules-close {
  width: 100%; margin-top: 20px; padding: 14px; border: none; border-radius: 12px;
  font-size: var(--fs-lg); font-weight: 700; color: #fff;
  background: linear-gradient(90deg, #e23b5a, #b23048); cursor: pointer; touch-action: manipulation;
}

/* ---- Astuce contextuelle ---- */
#tip {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 130px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 24;
  width: min(90%, 380px);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: #101014;
  background: #e2b53b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  text-align: center;
}

.hidden { display: none !important; }

/* ---- Écran-titre (Jalon 83) ---- */
#title-screen {
  position: fixed; inset: 0; z-index: 120; /* au-dessus de la création (100) et des règles (110) */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px;
  background: radial-gradient(120% 90% at 50% 30%, rgba(10, 12, 28, 0.35), rgba(8, 9, 18, 0.88) 78%);
}
#title-logo { max-width: 92vw; height: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 24px rgba(226, 59, 90, 0.35)); }
#title-tag {
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  color: #c9c4b8; font-size: clamp(15px, 3vw, 19px); letter-spacing: 0.04em;
}
#title-enter {
  margin-top: 8px; padding: 15px 34px;
  border: 1px solid rgba(226, 59, 90, 0.6); border-radius: 14px;
  background: rgba(226, 59, 90, 0.14); color: #ffd9e0;
  font-size: var(--fs-xl); font-weight: 700; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 0 24px rgba(226, 59, 90, 0.25);
}
#title-enter:active { transform: translateY(1px); }
#title-foot { color: #6f6c78; font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- Petite annonce (Jalon 86) ---- */
#ad-bar {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 140px);
  z-index: 32;
  display: flex; gap: 6px; align-items: center;
  width: min(440px, 92vw);
  padding: 10px;
  background: rgba(22, 18, 12, 0.97);
  border: 1px solid rgba(217, 164, 65, 0.4);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}
#ad-bar input {
  flex: 1; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 9px 10px;
  background: #26211a; color: #e8e8ec; font-size: var(--fs-md);
}
#ad-bar #ad-send {
  border: none; border-radius: 8px; padding: 9px 14px;
  background: #d9a441; color: #101014; font-size: var(--fs-lg); font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}

/* --- J91 : le HUD s'efface derrière l'écran-titre (immersion du premier regard) --- */
body.title-up #hud, body.title-up #mute-btn, body.title-up #keys-btn, body.title-up #chat-btn,
body.title-up #inv-btn, body.title-up #plan-btn, body.title-up #convo-btn, body.title-up #profile-btn, body.title-up #tip, body.title-up #toast,
body.title-up #interact-btn, body.title-up #notebook-btn, body.title-up #casebook-btn {
  visibility: hidden;
}

/* --- J92 : Fichier des habitants — fiches de police façon dossier papier --- */
#files-panel {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 40;
  width: min(94vw, 560px);
  max-height: 80vh; overflow-y: auto;
  padding: 16px 18px; border-radius: 14px;
  background: rgba(16, 14, 10, 0.97);
  border: 1px solid rgba(217, 164, 65, 0.35);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8);
  font-size: var(--fs-md);
}
#files-panel h2 { font-size: var(--fs-lg); margin-bottom: 10px; color: #e8d8b0; }
#files-panel .empty { color: #9a9aa6; font-style: italic; }
.fiche {
  display: flex; gap: 12px; align-items: flex-start;
  background: #efe6d2; color: #26221a;
  border-radius: 6px; padding: 10px 12px; margin: 10px 0;
  border: 1px solid #cbbb95;
  box-shadow: inset 0 0 24px rgba(120, 96, 40, 0.12), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.fiche.fiche-close { opacity: 0.62; filter: grayscale(0.5); }
.fiche-photo-wrap { position: relative; flex: 0 0 auto; }
.fiche-photo { display: block; width: 76px; height: 76px; border: 3px solid #b7a678; background: #2a2f3a; image-rendering: pixelated; }
.fiche-tampon {
  position: absolute; left: -6px; bottom: -6px;
  font: 700 var(--fs-micro)/1 ui-monospace, Consolas, monospace; letter-spacing: 0.1em;
  color: #a02532; border: 2px solid #a02532; border-radius: 3px;
  padding: 2px 4px; transform: rotate(-8deg); background: rgba(239, 230, 210, 0.85);
}
.fiche-close .fiche-tampon { color: #444; border-color: #444; }
.fiche-body { flex: 1; min-width: 0; }
.fiche-name { font-weight: 800; font-size: var(--fs-lg); font-family: Georgia, 'Times New Roman', serif; }
.fiche-civ { color: #5c5340; font-size: var(--fs-sm); margin: 2px 0 4px; font-style: italic; }
.fiche-emp { font-size: var(--fs-sm); margin: 2px 0 4px; }
.fiche-note { font-size: var(--fs-sm); margin: 3px 0; border-top: 1px dashed #cbbb95; padding-top: 3px; }
.fiche-note .t { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-xs); color: #6f6444; margin-right: 4px; } /* J253 : 3,31 → 4,72:1 */
/* Profil comportemental (J236) : des étiquettes, jamais des chiffres — la cellule constate
   une tendance, elle ne mesure pas. Le vert/rouge dirait « bon/mauvais » : on reste neutre. */
.fiche-traits { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 2px; }
.fiche-traits .trait { font-size: var(--fs-xs); padding: 2px 7px; border-radius: 9px;
  border: 1px solid #b9a97f; background: rgba(255, 255, 255, 0.35); color: #4a4230; }
.fiche-traits .trait-bas { border-style: dashed; }
.fiche-traits .trait-haut { background: rgba(0, 0, 0, 0.07); font-weight: 600; }
.fiche-profil-vide { font-size: var(--fs-xs); font-style: italic; color: #8a7c58; margin: 4px 0 2px; }
#files-panel .panel-x { color: #e8d8b0; }

/* --- J94 : mort différée — sélecteur d'échéance dans le carnet --- */
#notebook-panel .delay-row { font-size: var(--fs-sm); margin: 8px 0 4px; color: #c9b48f; }
#notebook-panel .delay-row select {
  background: #26252d; color: #e8e8ec; border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px; padding: 4px 6px; margin-left: 4px; font-size: var(--fs-sm);
}

/* --- J95 : plan du village annotable (grande popup, deux calques) --- */
#plan-panel {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 41;
  width: min(96vw, 820px);
  max-height: 92vh; overflow-y: auto;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(14, 13, 10, 0.97);
  border: 1px solid rgba(217, 164, 65, 0.35);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8);
}
#plan-panel h2 { font-size: var(--fs-lg); margin-bottom: 8px; color: #e8d8b0; }
#plan-panel .empty { color: #9a9aa6; font-size: var(--fs-sm); font-style: italic; margin-top: 6px; }
.plan-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.plan-tools button {
  border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; padding: 6px 10px;
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer; touch-action: manipulation;
  background: rgba(255,255,255,0.06); color: #cfcfda;
}
.plan-tools button.active { background: #e2b53b; color: #101014; border-color: transparent; }
.plan-colors button { width: 26px; height: 26px; border-radius: 50%; padding: 0; border: 2px solid transparent; }
.plan-colors button.active { border-color: #fff; }
.plan-wrap { overflow: auto; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); }
#plan-canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }

/* --- J96 : quick wins UI/UX (recherche jeux 2D) --- */
html, body { overscroll-behavior: none; } /* pas de pull-to-refresh en pleine partie */

/* Ouverture de panneau : 150 ms d'ease-out — la différence entre « site web » et « jeu ». */
@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
#inv-panel:not(.hidden),
#gazette-panel:not(.hidden), #files-panel:not(.hidden), #profile-panel:not(.hidden),
#interro-panel:not(.hidden), #answer-panel:not(.hidden), #actions-panel:not(.hidden),
#keys-panel:not(.hidden), #spectate-panel:not(.hidden) {
  animation: panel-in 0.15s ease-out;
}
/* Les panneaux centrés gardent leur translate(-50%,-50%) : on anime seulement l'opacité
   (panel-in animerait le transform et casserait le centrage). J151 : carnet + dossier
   passent centrés → ils rejoignent panel-fade avec le Plan et le Fichier. */
/* J268 : la console de surveillance rejoint la liste — elle est centrée par `translateX(-50%)`
   depuis toujours et recevait `panel-in`, qui anime le `transform` : elle s'ouvrait décalée d'une
   demi-largeur. Invisible à 324 px de large, franc à 1 120 px. */
#plan-panel:not(.hidden), #files-panel:not(.hidden), #pubcam-panel:not(.hidden),
#notebook-panel:not(.hidden), #casebook-panel:not(.hidden) { animation: panel-fade 0.15s ease-out; }
@keyframes panel-fade { from { opacity: 0; } to { opacity: 1; } }

/* Badge « non-lu » (pattern Paradise Killer : signaler la nouvelle info). */
.has-unread { position: relative; }
.has-unread::after {
  content: attr(data-unread);
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: #e23b5a; color: #fff;
  font-size: var(--fs-xs); font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* Bouton ⚡ : pop quand une NOUVELLE action apparaît (pattern Among Us). */
@keyframes act-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
#actions-btn.pop { animation: act-pop 0.28s ease-out; }

/* --- J99 : émission spéciale (le poste en gros plan) --- */
#show-panel {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 42;
  width: min(94vw, 420px);
  padding: 16px 18px; border-radius: 14px;
  background: rgba(8, 10, 14, 0.98);
  border: 1px solid rgba(226, 59, 90, 0.4);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.85);
}
#show-panel h2 { font-size: var(--fs-lg); margin-bottom: 10px; color: #ffb9c9; }
#show-panel .empty { color: #9a9aa6; font-size: var(--fs-sm); font-style: italic; margin-bottom: 8px; }
#show-panel:not(.hidden) { animation: panel-fade 0.15s ease-out; }
/* J253 — le carnet de cellule (J194) empruntait la classe `.reg-card` du registre, dont les
   styles sont portés par `#registry-panel .reg-card` : hors du registre, rien ne s'appliquait et
   le nom retombait sur le 16 px par défaut du navigateur — la seule taille hors échelle de toute
   l'interface. Classe propre, taille sur l'échelle. */
#show-panel .cell-card {
  display: flex; flex-direction: column; gap: 2px; margin: 5px 0;
  padding: 6px 9px; border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.04); border-left: 2px solid rgba(255, 185, 201, 0.45);
}
#show-panel .cell-card > b { font-size: var(--fs-md); color: #f2e7ec; }
/* J256 — le contenu d'une poubelle : une ligne par objet, un bouton pour le prendre. */
#show-panel .bin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 5px 0; padding: 7px 9px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: var(--fs-md); color: #e2e2ea;
}
#show-panel .bin-row button {
  flex: 0 0 auto; border: none; border-radius: 7px; padding: 5px 11px;
  font-size: var(--fs-sm); font-weight: 700; color: #101014; background: #cbb488; cursor: pointer;
}
#show-panel .bin-row button:hover { background: #e0cba0; }
/* J299 ⑥ — LA LIGNE COMMUNE DES TROIS FOUILLES (corps, poubelle, personne). Elle reprend
   exactement la mise en forme de `.bin-row`, qui était la plus lisible des trois : c'est ce même
   style qui vaut désormais pour les trois gestes, au lieu d'un panneau à boutons, d'un panneau à
   lignes et d'un toast qui s'effaçait. La ligne SANS bouton est le cas de la palpation — la
   cellule saisit, elle ne choisit pas (J60). */
#show-panel .fou-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 5px 0; padding: 7px 9px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: var(--fs-md); color: #e2e2ea;
}
#show-panel .fou-row button {
  flex: 0 0 auto; border: none; border-radius: 7px; padding: 5px 11px;
  font-size: var(--fs-sm); font-weight: 700; color: #101014; background: #cbb488; cursor: pointer;
}
#show-panel .fou-row button:hover { background: #e0cba0; }
#show-panel .fou-det { color: #b9b9c6; font-size: var(--fs-sm); }
.show-frame {
  position: relative; width: 224px; height: 224px; margin: 0 auto;
  border: 6px solid #1c232e; border-radius: 10px; overflow: hidden; background: #2a2f3a;
}
.show-frame canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.show-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 4px);
  animation: scan-roll 6s linear infinite;
}
@keyframes scan-roll { from { background-position-y: 0; } to { background-position-y: 32px; } }
.show-live {
  position: absolute; top: 6px; left: 8px;
  font: 800 var(--fs-micro)/1 ui-monospace, Consolas, monospace; letter-spacing: 0.12em;
  color: #ff5470; text-shadow: 0 0 6px rgba(255, 84, 112, 0.8);
  animation: live-blink 1.2s steps(2) infinite;
}
@keyframes live-blink { 50% { opacity: 0.25; } }
.show-caption { text-align: center; font-size: var(--fs-md); color: #cfcfda; margin: 10px 0 4px; }
.show-sub {
  min-height: 44px; padding: 8px 10px; margin: 6px 0;
  background: rgba(255, 255, 255, 0.05); border-radius: 8px;
  font-size: var(--fs-md); font-style: italic; color: #e9e6df;
}
.show-timer { text-align: center; font-size: var(--fs-sm); color: #9a9aa6; }
#show-panel { max-height: 86vh; overflow-y: auto; }
.lure-target, .lure-scope, .lure-back {
  display: block; width: 100%; margin: 6px 0; padding: 10px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 10px;
  background: rgba(255,255,255,0.06); color: #e8e8ec;
  font-size: var(--fs-md); font-weight: 700; cursor: pointer; touch-action: manipulation; text-align: left;
}
.lure-target:hover, .lure-scope:hover { background: rgba(226, 59, 90, 0.18); }
/* J192 — dossier d'habilitation (chef) : rangée de boutons de décision. */
.hab-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hab-btn { flex: 1 1 40%; padding: 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06); color: #e8e8ec; font-size: var(--fs-md); font-weight: 800; cursor: pointer; touch-action: manipulation; }
.hab-btn.hab-ok { background: rgba(70, 170, 110, 0.22); border-color: rgba(70,170,110,0.5); }
.hab-btn.hab-no { background: rgba(226, 59, 90, 0.20); border-color: rgba(226,59,90,0.5); }
.hab-btn:active { transform: translateY(1px); }
/* J409 — proposition d'échange de numéros : un encart qui n'efface aucun panneau ouvert. */
.num-offer { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60;
  width: min(420px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 12px;
  background: rgba(18, 18, 26, 0.94); border: 1px solid rgba(255,255,255,0.18); color: #e8e8ec; font-size: var(--fs-md); }
/* J458 — le contrôle d'identité et des affaires : même encart que l'offre de numéros, avec la liste
 * des motifs (le motif choisi est lu par le fouillé). */
.controle-box .ctrl-legende { margin-top: 6px; font-size: var(--fs-sm); opacity: .85; }
.controle-box .ctrl-motifs { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.controle-box .ctrl-motif { display: flex; gap: 6px; align-items: baseline; font-size: var(--fs-sm); cursor: pointer; }
.controle-box .ctrl-motif small { font-size: var(--fs-xs); opacity: .8; }
.controle-box .ctrl-compte { margin-top: 6px; font-size: var(--fs-xs); opacity: .8; }
.controle-box .hab-btn[disabled] { opacity: .45; cursor: not-allowed; }
/* J197 — briefing de départ / écrans de rôle (habitant, Kira, chef). */
.brief-id { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; padding: 8px;
  border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.brief-id canvas { width: 60px; height: 60px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15);
  image-rendering: pixelated; flex: 0 0 auto; }
.brief-id-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brief-id-txt b { font-size: var(--fs-lg); }
.brief-line { margin: 7px 0; font-size: var(--fs-md); line-height: 1.5; }
.brief-ok { display: block; width: 100%; margin-top: 14px; }
/* J195 — tableau de recoupement (Dossier) : suspects rangés par score. */
.xref-tbl { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 8px; }
.xref-row { border: 1px solid rgba(255,255,255,0.12); border-left-width: 4px; border-radius: 8px; padding: 6px 8px; background: rgba(255,255,255,0.05); }
.xref-row.xr-hot { border-left-color: #e23b5a; }
.xref-row.xr-warm { border-left-color: #e0a24a; }
.xref-row.xr-cold { border-left-color: #5a6b8a; }
.xref-row .xr-head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); }
.xref-row .xr-job { color: #9a9aa6; font-size: var(--fs-xs); font-weight: 600; }
.xref-row .xr-score { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(255,255,255,0.1); border-radius: 999px; padding: 1px 8px; }
.xref-row .xr-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.xr-chip { font-size: var(--fs-xs); color: #d8dbe2; background: rgba(255,255,255,0.08); border-radius: 6px; padding: 1px 6px; }
.lure-scope { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; }
.lure-hint { font-weight: 600; font-size: var(--fs-xs); color: #9a9aa6; }
/* J350 — le carnet du chef : les candidatures reçues, puis ceux qu'on peut solliciter. */
.rc-sec { margin: 10px 0 6px; font-weight: 800; font-size: var(--fs-sm); color: #d7d7e2; letter-spacing: .02em; }
.rc-cand { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; background: #23232c; border-left: 3px solid #4a6ea8; }
.rc-cand > b { font-size: var(--fs-md); color: #ececf3; }
.rc-why { font-size: var(--fs-xs); color: #b9c6dd; font-style: italic; }
.rc-ok { font-size: var(--fs-xs); font-weight: 700; color: #86d18a; }
.rc-wait { font-size: var(--fs-xs); font-weight: 700; color: #c9a25e; }
.lure-target[disabled] { opacity: .45; cursor: not-allowed; }
.lure-back {
  font-size: var(--fs-sm); font-weight: 600; color: #b9b9c4; padding: 8px 10px;
  background: rgba(255,255,255,0.03); border-style: dashed;
}
.lure-back:hover { background: rgba(255,255,255,0.08); }

/* --- J101 : fiches structurées — tampons partagés + notes groupées --- */
.fiche-cat {
  font: 700 var(--fs-micro)/1 ui-monospace, Consolas, monospace; letter-spacing: 0.1em;
  text-transform: uppercase; color: #6f6444; margin: 7px 0 2px; /* J253 : 3,31 → 4,72:1 sur le papier */
  border-bottom: 1px solid #cbbb95; padding-bottom: 2px;
}
.fiche-stamps { display: flex; gap: 6px; margin-top: 8px; }
.fiche-stamps button {
  flex: 1; padding: 6px 4px; font-size: var(--fs-xs); font-weight: 800;
  border: 1.5px solid #b7a678; border-radius: 5px; background: rgba(255,255,255,0.35);
  color: #5c5340; cursor: pointer; touch-action: manipulation;
}
.fiche-stamps button.active-inno { background: #57c98a; color: #10241a; border-color: #2e7a51; }
.fiche-stamps button.active-susp { background: #e2b53b; color: #241c06; border-color: #93752a; }
.fiche-stamps button.active-kira { background: #a02532; color: #fff; border-color: #5c141d; }
.fiche-v-kira { outline: 2px solid rgba(160, 37, 50, 0.8); }
.fiche-v-innocente { opacity: 0.75; }

/* --- J103 : registre de la ville (identifier un visage déjà vu) --- */
#registry-panel {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 41;
  width: min(94vw, 480px);
  font-size: var(--fs-md);
  animation: panel-fade 0.15s ease-out;
}
/* J186 : le registre d'état civil comme un vrai registre relié — papier, en-tête officiel, cachet. */
#registry-panel .reg-book {
  max-height: 80vh; overflow-y: auto;
  padding: 14px 16px 18px; border-radius: 6px 10px 10px 6px;
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(120, 90, 40, 0.09) 27px 28px),
    linear-gradient(160deg, #efe3c8, #e3d3ad);
  color: #3a2f1c;
  border: 1px solid #b79a5e; border-left: 8px solid #7a5a2e;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(120, 90, 40, 0.15);
}
#registry-panel .reg-head { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #7a5a2e; padding-bottom: 8px; margin-bottom: 10px; }
#registry-panel .reg-crest { font-size: 26px; }
#registry-panel .reg-titles { display: flex; flex-direction: column; line-height: 1.2; }
#registry-panel .reg-titles b { font-size: var(--fs-lg); letter-spacing: 0.06em; color: #4a3818; }
#registry-panel .reg-titles span { font-size: var(--fs-xs); font-style: italic; color: #6b552e; }
#registry-panel .reg-stamp {
  margin-left: auto; font: 800 var(--fs-micro)/1.1 ui-monospace, Consolas, monospace; text-align: center;
  color: #a2402f; border: 2px solid #a2402f; border-radius: 6px; padding: 4px 6px;
  transform: rotate(-8deg); opacity: 0.85; letter-spacing: 0.05em;
}
#registry-panel .panel-x { position: static; color: #7a5a2e; background: none; border: none; cursor: pointer; font-size: var(--fs-lg); margin-left: 6px; }
#registry-panel .empty { color: #6b552e; font-style: italic; }
#registry-panel .reg-hint { color: #5a4726; font-size: var(--fs-sm); margin-bottom: 12px; }
.registry-grid { display: flex; flex-wrap: wrap; gap: 10px; }
#registry-panel .reg-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: #fbf6ea; padding: 5px 5px 3px; border-radius: 3px;
  border: 1px solid #cbb488; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
.registry-face {
  width: 58px; height: 58px; image-rendering: pixelated; cursor: pointer;
  border: 1px solid #8a7038; border-radius: 3px; background: #2a2f3a;
}
#registry-panel .reg-card:hover .registry-face { box-shadow: 0 0 8px rgba(162, 64, 47, 0.6); }
#registry-panel .reg-cap { font: 700 var(--fs-micro)/1 ui-monospace, Consolas, monospace; letter-spacing: 0.05em; color: #9a7a3e; text-transform: uppercase; }

/* --- J104 : téléphone (contacts, annuaire, fadettes) --- */
#phone-panel {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 42;
  font-size: var(--fs-md);
  animation: panel-fade 0.15s ease-out;
}
/* J183/J184 : un vrai smartphone (proportions ~9:19, coque, écouteur, bouton home) + applis. */
#phone-panel .phone-device {
  position: relative;
  width: min(84vw, 300px);
  background: linear-gradient(160deg, #2b2e36 0%, #191b21 60%, #111318 100%);
  border-radius: 34px; padding: 30px 10px 34px;
  border: 1px solid #3a3d47;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.88), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#phone-panel .phone-ear { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 44px; height: 5px; border-radius: 3px; background: #0c0d11; }
#phone-panel .phone-home { position: absolute; bottom: 11px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; border-radius: 4px; background: #23262e; }
#phone-panel .phone-screen {
  background: #0a0f18; border-radius: 6px; overflow: hidden;
  height: min(72vh, 560px); display: flex; flex-direction: column; color: #dbe7ff;
}
#phone-panel .phone-status {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  font: 700 var(--fs-micro)/1 ui-monospace, Consolas, monospace; letter-spacing: 0.1em;
  color: #7f93b5; padding: 8px 12px; background: rgba(255, 255, 255, 0.03);
}
#phone-panel .phone-sig { margin-left: auto; }
#phone-panel .phone-status .panel-x { position: static; color: #9fb4d8; }
#phone-panel .phone-title { display: flex; align-items: center; gap: 6px; font-size: var(--fs-lg); font-weight: 800; color: #cfe0ff; padding: 10px 14px 4px; flex: 0 0 auto; }
#phone-panel .phone-back { background: none; border: none; color: #6fa8ff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px 0 0; }
#phone-panel .phone-app { padding: 6px 12px 14px; flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; }
#phone-panel .empty { color: #9a9aa6; font-style: italic; margin: 6px 0; font-size: var(--fs-md); }
#phone-panel .phone-incall { color: #bfe9c8; font-size: var(--fs-sm); margin: 6px 12px; padding: 8px 10px; background: rgba(55, 224, 138, 0.12); border-radius: 8px; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#phone-panel .phone-incall button { margin-left: auto; background: #7a2230; color: #ffd7dd; border: none; border-radius: 6px; padding: 4px 10px; font-size: var(--fs-xs); cursor: pointer; }
#phone-panel .sep { margin: 10px 0 5px; font-weight: 700; color: #8fb0e0; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; }
#phone-panel .panel-x { color: #cfe0ff; }
/* Grille d'applis (écran d'accueil) */
#phone-panel .phone-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px 4px; }
#phone-panel .phone-appicon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; color: #dbe7ff; }
#phone-panel .phone-appicon .ai-ic { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-size: 26px; background: linear-gradient(150deg, #2a3a5c, #1a2740); box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
#phone-panel .phone-appicon .ai-lb { font-size: var(--fs-xs); }
#phone-panel .phone-appicon .ai-badge { position: absolute; top: -4px; right: 12px; min-width: 16px; height: 16px; border-radius: 8px; background: #ff4d63; color: #fff; font: 700 var(--fs-micro)/16px sans-serif; text-align: center; padding: 0 3px; }
/* Lignes contacts / threads */
#phone-panel .phone-contact, #phone-panel .phone-thread { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 9px 2px; cursor: pointer; color: #e6eefc; }
#phone-panel .phone-contact:hover, #phone-panel .phone-thread:hover { background: rgba(255,255,255,0.04); }
#phone-panel .pc-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: linear-gradient(150deg, #3a5c8c, #26406a); color: #fff; font-size: var(--fs-lg); }
#phone-panel .pc-av.big { width: 66px; height: 66px; font-size: 28px; margin: 4px auto 6px; }
#phone-panel .pc-nm { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-md); flex: 1 1 auto; min-width: 0; }
#phone-panel .pc-nm i { font-style: normal; color: #8496b5; font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#phone-panel .pc-go { color: #566; }
/* Fiche contact + écran d'appel */
#phone-panel .phone-cd, #phone-panel .phone-callscr { text-align: center; padding: 10px 0 6px; }
#phone-panel .pc-cdnm { font-size: var(--fs-xl); font-weight: 800; }
#phone-panel .pc-cdrel { color: #8fb0e0; font-size: var(--fs-sm); margin-top: 2px; }
#phone-panel .phone-cdact { display: flex; gap: 10px; margin-top: 14px; }
#phone-panel .phone-act { flex: 1; padding: 11px; border-radius: 12px; border: none; cursor: pointer; font-size: var(--fs-md); font-weight: 700; color: #fff; }
#phone-panel .phone-act.call { background: #2e9e5b; } #phone-panel .phone-act.sms { background: #2f6cc4; }
#phone-panel .phone-act.hang { background: #b03246; margin: 16px auto 0; display: block; width: 60%; }
#phone-panel .callscr-lines { margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
#phone-panel .cs-line { background: rgba(255,255,255,0.06); border-radius: 10px; padding: 8px 10px; font-size: var(--fs-md); font-style: italic; }
/* Messages (SMS) */
#phone-panel .sms-log { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 0 8px; }
#phone-panel .sms-bubble { max-width: 78%; padding: 7px 11px; border-radius: 14px; font-size: var(--fs-md); line-height: 1.35; word-break: break-word; }
#phone-panel .sms-bubble.me { align-self: flex-end; background: #2f6cc4; color: #fff; border-bottom-right-radius: 4px; }
#phone-panel .sms-bubble.them { align-self: flex-start; background: #222c3a; color: #e6eefc; border-bottom-left-radius: 4px; }
#phone-panel .sms-form { display: flex; gap: 6px; flex: 0 0 auto; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08); }
#phone-panel .sms-form input { flex: 1; background: #1a2334; border: 1px solid rgba(120,170,255,0.3); border-radius: 18px; padding: 8px 12px; color: #eaf1ff; font-size: var(--fs-md); }
#phone-panel .sms-form button { flex: 0 0 auto; width: 38px; border: none; border-radius: 50%; background: #2f6cc4; color: #fff; font-size: var(--fs-lg); cursor: pointer; }
.tel-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; }
.tel-row .t { color: #8fb0e0; font-variant-numeric: tabular-nums; margin-right: 8px; }
.tel-row button {
  background: #223250; color: #dbe7ff; border: 1px solid rgba(120,170,255,0.35);
  border-radius: 6px; padding: 4px 10px; font-size: var(--fs-sm); cursor: pointer;
}
.tel-row button:hover { background: #2c4066; }
.tel-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; }
.tel-row .t { color: #8fb0e0; font-variant-numeric: tabular-nums; margin-right: 8px; }
.tel-row button {
  background: #223250; color: #dbe7ff; border: 1px solid rgba(120,170,255,0.35);
  border-radius: 6px; padding: 4px 10px; font-size: var(--fs-sm); cursor: pointer;
}
.tel-row button:hover { background: #2c4066; }

/* --- J105 : indices en cartes (Dossier d'enquête) --- */
.idx-grid { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.idx-card {
  position: relative;
  background: #efe6d2; color: #26221a;
  border-radius: 6px; padding: 8px 10px 8px 12px;
  border: 1px solid #cbbb95; border-left-width: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  font-size: var(--fs-sm); line-height: 1.4;
}
.idx-chip {
  display: inline-block; margin-bottom: 3px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.4px;
  color: #6d5c33; text-transform: uppercase;
}
.idx-txt { color: #2c2618; }
.idx-ded { border-left-color: #b98b2e; }
.idx-lab { border-left-color: #7a4fb3; }
.idx-cam { border-left-color: #3d76c9; }
.idx-mic { border-left-color: #2e8f6e; }
.idx-sea { border-left-color: #c0662c; }
.idx-gho { border-left-color: #5a5f7a; }
.idx-mot { border-left-color: #a83a3a; }
.idx-pis { border-left-color: #2aa1a8; background: #e3edea; }

/* --- J106 : contrôle du planton + signalements --- */
#control-panel {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 45;
  width: min(92vw, 400px);
  padding: 16px 18px; border-radius: 14px;
  background: rgba(14, 18, 28, 0.97);
  border: 1px solid rgba(90, 140, 220, 0.45);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.85);
  font-size: var(--fs-md);
  animation: panel-fade 0.15s ease-out;
}
#control-panel h2 { font-size: var(--fs-lg); margin-bottom: 8px; color: #cfe0ff; }
#control-panel .ctl-q { color: #aac4ee; margin-bottom: 10px; }
#control-panel .ctl-a {
  display: block; width: 100%; text-align: left; margin: 6px 0;
  background: #1d2a44; color: #dbe7ff; border: 1px solid rgba(120, 170, 255, 0.3);
  border-radius: 8px; padding: 9px 12px; font-size: var(--fs-md); cursor: pointer;
}
#control-panel .ctl-a:hover { background: #26385c; }
/* Appel à volontaires (J119) : même gabarit que le contrôle du planton. */
#cellcall-panel {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 45;
  width: min(92vw, 420px);
  padding: 16px 18px; border-radius: 14px;
  background: rgba(14, 18, 28, 0.97);
  border: 1px solid rgba(90, 140, 220, 0.45);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.85);
  font-size: var(--fs-md);
  animation: panel-fade 0.15s ease-out;
}
#cellcall-panel h2 { font-size: var(--fs-lg); margin-bottom: 8px; color: #cfe0ff; }
#cellcall-panel .ctl-q { color: #aac4ee; margin-bottom: 10px; }
#cellcall-panel .ctl-a {
  display: block; width: 100%; text-align: left; margin: 6px 0;
  background: #1d2a44; color: #dbe7ff; border: 1px solid rgba(120, 170, 255, 0.3);
  border-radius: 8px; padding: 9px 12px; font-size: var(--fs-md); cursor: pointer;
}
#cellcall-panel .ctl-a:hover { background: #26385c; }
.idx-sig { border-left-color: #3555a8; }

/* --- J112 : outils de classement (recherche, filtres, épinglage) --- */
.tool-row { display: flex; gap: 6px; margin: 6px 0; }
.tool-row input[type="text"] {
  flex: 1; background: #26252d; color: #e8e8ec; border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px; padding: 5px 8px; font-size: var(--fs-sm); min-width: 0;
}
.tool-row select {
  background: #26252d; color: #e8e8ec; border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px; padding: 4px 6px; font-size: var(--fs-sm);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
.chip {
  background: #26252d; color: #c9c9d2; border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px; padding: 3px 10px; font-size: var(--fs-xs); cursor: pointer;
}
.chip.on { background: #d9a441; color: #23180a; border-color: #d9a441; font-weight: 700; }
.idx-card { position: relative; }
.idx-pin {
  position: absolute; top: 5px; right: 6px;
  background: none; border: none; cursor: pointer; font-size: var(--fs-md); opacity: 0.55; padding: 0;
}
.idx-pin:hover { opacity: 1; }
.idx-pinned { box-shadow: 0 0 0 2px rgba(217, 164, 65, 0.55); }

/* Palmarès du serveur (J123) : petit historique des parties dans le lobby. */
#palmares {
  margin: 10px auto 0; max-width: 420px;
  background: rgba(14, 18, 28, 0.75); border: 1px solid rgba(120, 150, 200, 0.25);
  border-radius: 10px; padding: 8px 12px; font-size: var(--fs-sm); text-align: left;
}
#palmares .pal-title { color: #cfe0ff; font-weight: 600; margin-bottom: 5px; }
#palmares .pal-row { color: #9fb0cc; padding: 1px 0; }
/* J277 : la ligne de synthèse se détache des parties elles-mêmes — un filet et un peu d'air
   suffisent. La `color` accompagne toujours un fond ou un contexte redéfini (leçon J271). */
#palmares .pal-stat { color: #cfe0f5; border-top: 1px solid rgba(159, 176, 204, 0.28); margin-top: 4px; padding-top: 4px; }

/* Inventaire visuel (J128) : avatar + emplacements dessinés sur le corps, objets en cases. */
#inv-panel .inv-wrap { display: flex; gap: 12px; align-items: flex-start; }
#inv-panel .inv-left { flex: 0 0 auto; }
#inv-panel #inv-avatar { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); }
#inv-panel .inv-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
#inv-panel .slot-box { border: 1.5px dashed rgba(217, 164, 65, 0.55); border-radius: 12px; padding: 8px 10px; }
#inv-panel .slot-box.slot-intime { border-color: rgba(226, 59, 90, 0.55); }
#inv-panel .slot-title { font-size: var(--fs-md); font-weight: 700; color: #e8d9b0; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
#inv-panel .slot-intime .slot-title { color: #f0b9c4; }
#inv-panel .slot-n { background: rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 0 7px; font-size: var(--fs-xs); }
#inv-panel .slot-sub { font-weight: 400; font-size: var(--fs-xs); color: #8b8fa0; margin-left: auto; }
#inv-panel .inv-chip {
  display: flex; align-items: center; gap: 8px; margin: 4px 0; padding: 6px 8px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px; font-size: var(--fs-md);
}
#inv-panel .inv-chip .ci { font-size: 20px; line-height: 1; }
/* J210 — le panneau est assez large maintenant : le libellé se REPLIE au lieu d'être coupé
   (« Carte d'identité (la pe… » ne disait pas ce que fait l'objet). */
#inv-panel .inv-chip .ct { flex: 1; min-width: 0; white-space: normal; line-height: 1.3; }
#inv-panel .inv-chip .ca { display: flex; gap: 4px; }
#inv-panel .inv-chip .ca button {
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.07);
  color: #e2e2ea; border-radius: 8px; padding: 3px 7px; font-size: var(--fs-md); cursor: pointer;
}
#inv-panel .inv-chip .ca button:hover { background: rgba(255, 255, 255, 0.16); }
@media (max-width: 560px) {
  #inv-panel .inv-wrap { flex-direction: column; align-items: center; }
}

/* Barres de survie (J129) : faim et soif en bas à gauche, façon jeu de survie. */
#survival {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 21; display: flex; flex-direction: column; gap: 6px;
}
#survival .sv-row { display: flex; align-items: center; gap: 7px; }
#survival .sv-ico { font-size: var(--fs-lg); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
#survival .sv-bar {
  width: 130px; height: 10px; border-radius: 6px; overflow: hidden;
  background: rgba(10, 10, 16, 0.72); border: 1px solid rgba(255, 255, 255, 0.18);
}
#survival .sv-fill { height: 100%; width: 100%; background: #d9a441; transition: width 0.4s; border-radius: 6px; }
#survival .sv-fill.sv-water { background: #4d96d9; }
#survival .sv-fill.sv-low { background: #e23b5a; animation: sv-blink 1s infinite; }
@keyframes sv-blink { 50% { opacity: 0.55; } }

/* Actions contextuelles mises en avant (retour de jeu) : ce qui est possible ICI ressort. */
#actions-panel .act-row.act-hot {
  border-left: 3px solid #d9a441;
  background: rgba(217, 164, 65, 0.10);
}
#actions-panel .act-row.act-hot::before { content: '▸ '; color: #d9a441; }

/* J230 — le menu Actions est un RÉPERTOIRE, pas une liste qui saute. Une action qu'on ne peut
   pas faire ici reste à sa place, éteinte, et DIT ce qui lui manque. L'œil apprend les rangs. */
#actions-panel .act-row {
  display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
}
#actions-panel .act-row .act-lbl { flex: 1 1 auto; min-width: 0; }
#actions-panel .act-row .act-why {
  flex: 0 1 auto; font-size: var(--fs-xs); font-weight: 500; font-style: italic;
  color: #8b8b98; text-align: right; white-space: normal;
}
#actions-panel .act-row .act-why:empty { display: none; }
#actions-panel .act-row.act-off {
  opacity: 0.5; background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05); border-left: 3px solid transparent;
  cursor: default;
}
#actions-panel .act-row.act-off:active { background: rgba(255, 255, 255, 0.04); }
/* Bascule répertoire complet / seulement le jouable, et repli par groupe. */
#actions-panel .act-filter { margin: 2px 0 6px; }
#actions-panel .act-filter button {
  width: 100%; padding: 6px 8px; font-size: var(--fs-xs); font-weight: 600;
  color: #cfc3ff; background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 8px;
  cursor: pointer; touch-action: manipulation;
}
#actions-panel .act-grp { cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; }
#actions-panel .act-grp .act-grp-n { font-weight: 600; color: #6f6f7c; letter-spacing: 0; }
#actions-panel .act-grp.act-grp-off { color: #6f6f7c; }
/* La largeur de `#actions-panel` défalque son ancrage — voir sa déclaration d'origine.
   À 375 px, `88vw` donnait 330 + 76 = 406 px, soit 31 px hors cadre (contrôle étroit J219). */
@media (max-width: 699px) {
  /* Trop étroit pour une raison en bout de ligne : elle passe DESSOUS le libellé. */
  #actions-panel .act-row { flex-direction: column; align-items: stretch; gap: 2px; }
  #actions-panel .act-row .act-why { text-align: left; }
}

/* La télé en grand (J134) : cadre TV, allumage cathodique, scanlines, bandeau défilant. */
#tv-panel {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 5, 10, 0.72);
}
#tv-panel .tv-set { width: min(94vw, 640px); display: flex; flex-direction: column; align-items: center; }
#tv-panel .tv-frame {
  width: 100%;
  background: linear-gradient(160deg, #2a2c34 0%, #191a20 55%, #131318 100%);
  border-radius: 20px; padding: 12px 16px 10px;
  border: 2px solid #34363f; box-shadow: 0 22px 70px rgba(0, 0, 0, 0.88), inset 0 1px 0 rgba(255,255,255,0.06);
}
#tv-panel .tv-brand {
  display: flex; align-items: center; gap: 8px; padding: 0 4px 8px;
  font: 800 var(--fs-md)/1 ui-monospace, Consolas, monospace; letter-spacing: 0.16em; color: #cfd6e6;
}
#tv-panel .tv-brand b { color: #ff6b81; }
#tv-panel .tv-model { margin-left: auto; font-size: var(--fs-micro); letter-spacing: 0.2em; color: #6b7186; }
#tv-panel .tv-controls { display: flex; align-items: center; gap: 12px; padding: 9px 6px 2px; }
#tv-panel .tv-power { width: 9px; height: 9px; border-radius: 50%; background: #37e08a; box-shadow: 0 0 8px #37e08a; animation: sv-blink 2.4s infinite; }
#tv-panel .tv-grille { flex: 1; height: 10px; border-radius: 3px; background: repeating-linear-gradient(90deg, #23252d 0 3px, #14151a 3px 6px); }
#tv-panel .tv-knob { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a4d58, #23242b); border: 1px solid #14151a; box-shadow: inset 0 1px 1px rgba(255,255,255,0.15); }
#tv-panel .tv-feet { display: flex; justify-content: space-between; width: 78%; }
#tv-panel .tv-feet i { width: 34px; height: 10px; border-radius: 0 0 5px 5px; background: linear-gradient(#22232b, #16171c); box-shadow: 0 6px 10px rgba(0,0,0,0.6); }
#tv-panel .tv-screen {
  position: relative; border-radius: 10px; overflow: hidden;
  background: #0b1020; color: #dfe8ff; padding: 14px 16px 10px;
  max-height: 66vh; overflow-y: auto;
  animation: tv-on 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
#tv-panel .tv-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 3px);
}
@keyframes tv-on { 0% { transform: scaleY(0.02); filter: brightness(6); } 60% { transform: scaleY(1.04); } 100% { transform: scaleY(1); filter: brightness(1); } }
#tv-panel .tv-head { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--fs-lg); letter-spacing: 0.06em; margin-bottom: 8px; }
#tv-panel .tv-live { color: #ff5566; font-size: var(--fs-xs); animation: sv-blink 1.2s infinite; }
#tv-panel .tv-hour { margin-left: auto; color: #9fb0cc; font-size: var(--fs-sm); }
#tv-panel .tv-head .panel-x { position: static; margin-left: 8px; }
/* J179 : la scène du diaporama — une seule « diapo » à la fois, qui défile. */
#tv-panel .tv-stage { min-height: 218px; display: flex; align-items: center; justify-content: center; padding: 6px 4px; }
#tv-panel .tv-slide { text-align: center; width: 100%; animation: tv-slide-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes tv-slide-in { 0% { opacity: 0; transform: translateY(10px) scale(0.98); } 100% { opacity: 1; transform: none; } }
#tv-panel .tv-slide-kicker {
  display: inline-block; font: 800 var(--fs-xs)/1 ui-monospace, Consolas, monospace; letter-spacing: 0.14em;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
#tv-panel .tv-kick-live { color: #ff9fb0; background: rgba(255, 85, 102, 0.16); }
#tv-panel .tv-kick-alert { color: #ffd166; background: rgba(255, 209, 102, 0.14); }
#tv-panel .tv-kick-news { color: #8fd0ff; background: rgba(120, 180, 255, 0.14); }
#tv-panel .tv-kick-poll { color: #c6b8ff; background: rgba(160, 140, 255, 0.16); }
#tv-panel .tv-slide-portrait { width: 128px; height: 128px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, 0.3); image-rendering: pixelated; display: block; margin: 0 auto 10px; background: #10192e; }
#tv-panel .tv-slide-big { font-size: 26px; font-weight: 800; letter-spacing: 0.01em; }
#tv-panel .tv-slide-news { font-size: var(--fs-xl); font-weight: 600; line-height: 1.4; padding: 0 6px; }
#tv-panel .tv-slide-sub { font-size: var(--fs-md); color: #9fb0cc; margin-top: 8px; font-style: italic; }
#tv-panel .tv-gauge { width: 62%; max-width: 320px; height: 12px; margin: 12px auto 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
#tv-panel .tv-gauge i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff5566, #ffb347); transition: width 0.6s ease; }
#tv-panel .tv-dots { display: flex; gap: 7px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
#tv-panel .tv-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: none; cursor: pointer; background: rgba(255, 255, 255, 0.24); transition: background 0.2s, transform 0.2s; }
#tv-panel .tv-dot.on { background: #ffd166; transform: scale(1.25); }
#tv-panel .tv-ticker { overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(255, 255, 255, 0.18); margin-top: 12px; padding-top: 6px; }
#tv-panel .tv-ticker span { display: inline-block; animation: tv-scroll 18s linear infinite; font-size: var(--fs-sm); color: #ffd166; }
@keyframes tv-scroll { 0% { transform: translateX(30%); } 100% { transform: translateX(-100%); } }

/* --- Vraies conversations (J140) : le panneau de dialogue avec un habitant. --------------
 * Ancré en bas à gauche (au-dessus des barres de survie) pour laisser la scène visible :
 * on voit l'habitant parler en bulles PENDANT qu'on choisit ses questions. */
/* J326/J329 — LES ÉPREUVES DE TRAVAIL (la caisse, et ce qui suivra). Même ancrage que la discussion (centré en bas, le point de regard pendant une
   manipulation), donc mêmes contraintes : centrage par translateX seul → animation `panel-fade`
   et JAMAIS `panel-in`, qui écraserait le transform (piège J151). Largeur en `min(94vw, …)` pour
   ne pas déborder sur mobile (piège J219/J253). */
#epreuve-panel {
  position: fixed;
  left: 50%; transform: translateX(-50%); bottom: 96px;
  z-index: 44;
  width: min(94vw, 520px);
  padding: 12px 14px; border-radius: 12px;
  background: rgba(18, 16, 12, 0.97);
  border: 1px solid rgba(220, 190, 120, 0.45);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  color: #f3ead6;
  font-size: var(--fs-md);
}
#epreuve-panel h3 { margin: 0 0 8px; font-size: var(--fs-lg); color: #f0d9a0; }
#epreuve-panel .ep-note { color: #cbbf9f; font-size: var(--fs-sm); margin-bottom: 10px; }
#epreuve-panel .ep-total {
  font-size: var(--fs-xl); font-weight: 700; color: #ffe9a8;
  font-variant-numeric: tabular-nums; margin-bottom: 10px;
}
/* J330 — le barème publié de l'arrosage : une liste courte, lue d'un coup d'œil. */
#epreuve-panel .ep-liste { margin: 0 0 10px; padding-left: 18px; color: #cbbf9f; font-size: var(--fs-sm); }
#epreuve-panel .ep-liste b { color: #ffe9a8; font-variant-numeric: tabular-nums; }
#epreuve-panel .ep-grille { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#epreuve-panel .ep-plus, #epreuve-panel .ep-moins {
  min-width: 110px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(60, 52, 34, 0.9); border: 1px solid rgba(220, 190, 120, 0.35);
  color: #f3ead6; font-size: var(--fs-sm);
}
#epreuve-panel .ep-plus:hover, #epreuve-panel .ep-moins:hover { background: rgba(86, 74, 46, 0.95); }
/* J331 — les bacs de tri : trois colonnes égales, chacune avec ses mentions sous son nom. */
#epreuve-panel .ep-mention { color: #ffe9a8; font-style: italic; }
#epreuve-panel .ep-bac {
  flex: 1 1 0; min-width: 96px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(60, 52, 34, 0.9); border: 1px solid rgba(220, 190, 120, 0.35);
  color: #f3ead6; font-size: var(--fs-sm); text-align: left;
}
#epreuve-panel .ep-bac:hover:not(:disabled) { background: rgba(86, 74, 46, 0.95); }
#epreuve-panel .ep-bac:disabled { opacity: 0.45; cursor: default; }
#epreuve-panel .ep-bac .n { color: #cbbf9f; font-size: var(--fs-xs); }
/* J333 — la famille « répondre » : les mentions du fait courant, et les numéros de faits qui
   permettent de revenir en arrière sans tout reprendre. */
#epreuve-panel .ep-opt {
  flex: 1 1 0; min-width: 120px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(60, 52, 34, 0.9); border: 1px solid rgba(220, 190, 120, 0.35);
  color: #f3ead6; font-size: var(--fs-sm); text-align: left;
}
#epreuve-panel .ep-opt:hover { background: rgba(86, 74, 46, 0.95); }
#epreuve-panel .ep-opt.on { background: rgba(120, 100, 56, 0.95); border-color: rgba(255, 233, 168, 0.8); }
#epreuve-panel .ep-lignes { display: flex; gap: 6px; margin-bottom: 10px; }
#epreuve-panel .ep-ligne {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: rgba(40, 35, 24, 0.9); border: 1px solid rgba(220, 190, 120, 0.25);
  color: #cbbf9f; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
#epreuve-panel .ep-ligne.fait { color: #ffe9a8; border-color: rgba(220, 190, 120, 0.55); }
#epreuve-panel .ep-ligne.on { background: rgba(120, 100, 56, 0.95); color: #fff6dd; }
/* J344 — la famille « archiver » : le fil du hikikomori. Les messages s'empilent en COLONNE, pas
   en grille : on lit une conversation, et une conversation se lit de haut en bas. Le rang archivé
   est dans une pastille de largeur FIXE (`tabular-nums`), sinon les lignes danseraient au fil des
   clics — piège J149, déjà payé sur les jauges de caractère. */
#epreuve-panel .ep-fil { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
#epreuve-panel .ep-msg {
  display: flex; align-items: flex-start; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left;
  background: rgba(60, 52, 34, 0.9); border: 1px solid rgba(220, 190, 120, 0.35);
  color: #f3ead6; font-size: var(--fs-sm); line-height: 1.35;
}
#epreuve-panel .ep-msg:hover { background: rgba(86, 74, 46, 0.95); }
#epreuve-panel .ep-msg.on { background: rgba(120, 100, 56, 0.95); border-color: rgba(255, 233, 168, 0.8); }
#epreuve-panel .ep-msg .n {
  flex: 0 0 20px; text-align: center; color: #cbbf9f; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#epreuve-panel .ep-msg.on .n { color: #ffe9a8; }
#epreuve-panel .ep-choix {
  min-width: 62px; padding: 7px 8px; border-radius: 8px; cursor: pointer;
  background: rgba(60, 52, 34, 0.9); border: 1px solid rgba(220, 190, 120, 0.35);
  color: #f3ead6; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
#epreuve-panel .ep-choix:hover { background: rgba(86, 74, 46, 0.95); }
#epreuve-panel .ep-choix .n { color: #ffe9a8; font-weight: 700; }
#epreuve-panel .ep-pied { display: flex; gap: 8px; align-items: center; }
#epreuve-panel .ep-pied button { padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: var(--fs-sm); }
#epreuve-panel .ep-temps { margin-left: auto; color: #cbbf9f; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

#dialog-panel {
  /* J210 — la discussion se joue AU CENTRE, en bas : c'est le point de regard pendant un échange,
     et le coin gauche la reléguait hors du champ. Centrage par translateX seul → l'animation
     autorisée reste `panel-fade` (opacité), jamais `panel-in` qui écraserait le transform (J151). */
  position: fixed;
  left: 50%; transform: translateX(-50%); bottom: 96px;
  z-index: 44;
  width: min(94vw, 560px);
  padding: 12px 14px; border-radius: 12px;
  background: rgba(16, 20, 15, 0.96);
  border: 1px solid rgba(150, 200, 120, 0.4);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  font-size: var(--fs-md);
  animation: panel-fade 0.15s ease-out;
}
#dialog-panel h2 { font-size: var(--fs-lg); margin: 0 0 6px; color: #d9f0c8; position: relative; padding-right: 26px; }
#dialog-panel h2 .panel-x { position: absolute; right: 0; top: -2px; }
#dlg-log { max-height: 190px; overflow-y: auto; margin-bottom: 8px; }
#dlg-log .dlg-line { color: #b9ceaa; padding: 2px 0; font-size: var(--fs-md); border-bottom: 1px dashed rgba(255, 255, 255, 0.07); }
#dlg-log .dlg-line b { color: #e8ffd8; }
#dlg-choices .dlg-hint { color: #ffd166; font-size: var(--fs-sm); margin-bottom: 5px; }
#dlg-choices .dlg-q {
  display: block; width: 100%; text-align: left; margin: 5px 0;
  background: #22301c; color: #e2f2d4; border: 1px solid rgba(160, 210, 120, 0.3);
  border-radius: 8px; padding: 8px 11px; font-size: var(--fs-md); cursor: pointer;
}
#dlg-choices .dlg-q:hover { background: #2d4025; }
/* J225 — une relance prolonge la réponse qu'on vient d'entendre : elle est décalée et teintée,
   pour qu'on voie d'un coup d'œil qu'elle appartient au fil en cours et non au socle commun. */
#dlg-choices .dlg-suite {
  margin-left: 14px; width: calc(100% - 14px);
  background: #1d2c30; border-color: rgba(140, 200, 220, 0.35); color: #d6eef5;
}
#dlg-choices .dlg-suite:hover { background: #263a40; }
/* Question qu'on ne peut poser qu'à quelqu'un de ce métier. */
#dlg-choices .dlg-job { background: #2c2820; border-color: rgba(220, 190, 120, 0.35); color: #f0e6cf; }
#dlg-choices .dlg-job:hover { background: #3a3428; }

/* --- Console de surveillance (J135) : sections + fil d'oreille du micro branché. ---------- */
#pubcam-panel .surv-sec { color: #ffd166; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin: 9px 0 4px; }
#pubcam-panel .mic-pick { display: block; width: 100%; text-align: left; margin: 3px 0; background: #24202f; color: #e8ddf5; border: 1px solid rgba(190, 140, 255, 0.3); border-radius: 7px; padding: 6px 10px; font-size: var(--fs-md); cursor: pointer; }
#pubcam-panel .mic-pick.active { background: #3a2d54; border-color: rgba(190, 140, 255, 0.7); }
#micro-log { max-height: 120px; overflow-y: auto; margin-top: 6px; background: #14121a; border: 1px solid rgba(190, 140, 255, 0.25); border-radius: 7px; padding: 6px 8px; }
#micro-log .mic-line { color: #cbb8e8; font-size: var(--fs-sm); padding: 2px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.07); }
#micro-log .mic-idle { color: #6f6a80; font-style: italic; }

/* --- J144 : le carnet en LIVRE OUVERT (famille « contenant » du guide pixel art). --------
 * Le petit panneau flottant devient un carnet noir ouvert, centré : couverture cuir, reliure
 * au centre, deux pages de papier sombre (le texte clair reste lisible), signets sur la tranche. */
#notebook-panel {
  left: 50%; top: 50%; right: auto;
  transform: translate(-50%, -50%);
  width: min(94vw, 660px); max-height: 86vh;
  padding: 0; overflow: hidden;
  background: #0b0709;
  border: 1px solid rgba(226, 59, 90, 0.4);
  border-radius: 12px;
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.85), inset 0 0 0 5px #17070c;
  animation: dn-open 0.3s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}
@keyframes dn-open { 0% { transform: translate(-50%, -50%) scale(0.92); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
#notebook-panel h2 { padding: 12px 16px 8px; margin: 0; }
#notebook-panel .panel-x { top: 10px; right: 12px; }

.dn-book { display: flex; align-items: stretch; height: min(74vh, 560px); }
.dn-tabs { display: flex; flex-direction: column; gap: 6px; padding: 14px 3px 0 6px; background: #17070c; }
.dn-tab { width: 30px; height: 34px; border: none; border-radius: 7px 0 0 7px; background: #2a1016; color: #ffd9e0; font-size: var(--fs-lg); cursor: pointer; opacity: 0.72; transition: opacity .12s, background .12s; }
.dn-tab:hover { opacity: 1; background: #3a161e; }
.dn-tab:active { transform: translateX(1px); }

.dn-spread { flex: 1; display: flex; min-width: 0; position: relative; }
.dn-spread::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 14px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.55), transparent); pointer-events: none; z-index: 2; }
.dn-page { flex: 1 1 50%; min-width: 0; overflow-y: auto; padding: 12px 16px 18px; background: #191316; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 26px); }
.dn-page.dn-l { box-shadow: inset -10px 0 16px rgba(0, 0, 0, 0.4); }
.dn-page.dn-r { box-shadow: inset 10px 0 16px rgba(0, 0, 0, 0.4); }
.dn-head { font-family: "Iowan Old Style", Georgia, serif; font-size: var(--fs-sm); letter-spacing: 0.08em; color: #cc9aa4; text-transform: uppercase; margin-bottom: 8px; border-bottom: 1px solid rgba(226, 59, 90, 0.25); padding-bottom: 5px; }
.dn-rule { font-size: var(--fs-sm); line-height: 1.5; color: #b7a9ad; font-style: italic; margin: 5px 0; padding-left: 10px; border-left: 2px solid rgba(226, 59, 90, 0.35); }

@media (max-width: 640px) {
  #notebook-panel { width: 96vw; }
  .dn-book { height: auto; max-height: 76vh; flex-direction: column; }
  .dn-tabs { flex-direction: row; padding: 8px 8px 0; }
  .dn-tab { border-radius: 7px 7px 0 0; }
  .dn-spread { flex-direction: column; }
  .dn-spread::before { display: none; }
  .dn-page { max-height: 34vh; }
  .dn-page.dn-l { box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.35); }
  .dn-page.dn-r { box-shadow: inset 0 8px 14px rgba(0, 0, 0, 0.35); }
}

/* --- J145 : le Dossier d'enquête en CHEMISE CARTONNÉE (famille contenant, variante police).
 * Distinct du carnet-cuir : couverture kraft, tampon « Cellule », filtres en intercalaires,
 * indices en fiches. Corps sombre conservé (le texte clair reste lisible). Habillage seul. */
#casebook-panel {
  left: 50%; top: 50%; right: auto;
  transform: translate(-50%, -50%);
  width: min(94vw, 600px); max-height: 86vh;
  padding: 0 16px 16px; overflow-y: auto;
  background: #12161d;
  border: 1px solid rgba(59, 160, 226, 0.28);
  border-top: 13px solid #b8a06a; /* la tranche cartonnée de la chemise */
  border-radius: 3px 3px 14px 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.82);
  animation: dn-open 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.15);
}
#casebook-panel h2 {
  margin: 0 -16px 12px; padding: 11px 16px 9px;
  background: linear-gradient(180deg, #cbb277, #b69f68);
  color: #2a2313; font-family: "Iowan Old Style", Georgia, serif;
  font-size: var(--fs-lg); letter-spacing: 0.01em;
  border-bottom: 2px solid #8f7a45;
  position: sticky; top: 0; z-index: 3;
}
#casebook-panel h2 .panel-x { color: #4a3d1a; top: 12px; }
.cb-stamp {
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  font: 700 var(--fs-micro)/1 "Avenir Next", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #7a1a2f; border: 2px solid #7a1a2f; border-radius: 4px; padding: 3px 6px; /* J253 : 2,88 → 4,55:1 sur le kraft */
  transform: rotate(-5deg); opacity: 0.82;
}
/* Filtres = intercalaires de dossier posés sur la ligne de séparation. */
#casebook-panel .chip-row { border-bottom: 2px solid #b8a06a; padding-bottom: 0; margin-bottom: 12px; gap: 3px; }
#casebook-panel .chip {
  border-radius: 7px 7px 0 0; border: 1px solid rgba(184, 160, 106, 0.5); border-bottom: none;
  background: #1c222b; color: #c4d2df; padding: 5px 9px; margin-bottom: -2px; position: relative; top: 2px;
}
#casebook-panel .chip.on { background: #b8a06a; color: #2a2313; top: 0; font-weight: 700; }
/* Indices = petites fiches cartonnées.
 *
 * J271 — LE DÉFAUT LE PLUS COÛTEUX DE L'INTERFACE, et il a survécu à J253. Cette règle retourne
 * le fond de la fiche en bleu-nuit, mais `color` restait celui de `.idx-card` (#26221a) et de
 * `.idx-txt` (#2c2618) — deux quasi-noirs prévus pour le fond CRÈME d'origine. Contraste réel :
 * **1,09:1** là où AA demande 4,5. Le Dossier était donc illisible dès qu'il contenait quelque
 * chose, et c'est précisément pour ça que l'audit de J253 l'a manqué : un Dossier VIDE n'a aucune
 * `.idx-card` dans le DOM, il n'y avait rien à mesurer.
 *
 * RÈGLE À RETENIR : redéfinir un `background` sans redéfinir la `color` qui allait avec est un
 * défaut à part entière. Les deux voyagent ensemble ou pas du tout — un test de `ci.js` refuse
 * désormais un fond de fiche sans couleur de texte associée. */
#casebook-panel .idx-card {
  background: #1a2029; color: #dbe4ee;
  border: 1px solid rgba(184, 160, 106, 0.22); border-left-width: 3px;
}
#casebook-panel .idx-txt { color: #dbe4ee; }   /* 12,7:1 — le corps de la fiche */
#casebook-panel .idx-chip { color: #d9b96a; }  /*  8,7:1 — l'en-tête, doré comme les intercalaires */
#casebook-panel .sep { color: #b7a577; }
@media (max-width: 640px) { #casebook-panel { width: 96vw; } }

/* J212 — composeur de SMS : on choisit son message dans une liste au lieu de l'écrire. */
#phone-panel .sms-compose { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 8px; margin-top: 6px; max-height: 40vh; overflow-y: auto; }
#phone-panel .sms-compose-h { color: #8496b5; font-size: var(--fs-xs); margin-bottom: 6px; }
#phone-panel .sms-choice {
  display: block; width: 100%; text-align: left; margin: 5px 0; padding: 8px 10px;
  border: 1px solid rgba(120, 160, 220, 0.35); border-radius: 14px;
  background: rgba(60, 100, 160, 0.18); color: #dde7f6;
  font-size: var(--fs-md); cursor: pointer; touch-action: manipulation;
}
#phone-panel .sms-choice:hover { background: rgba(70, 120, 190, 0.3); }

/* J212 — panneau « Mémoire des conversations » : le fil de tout ce qui s'est dit. */
#convo-panel {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 66px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 120px);
  z-index: 30;
  /* J253 : ancré à 66 px du bord droit — `92vw` le faisait sortir de 35 px sur un écran de 390
     (66 + 358,8 = 424,8). Même piège que `#actions-panel` (J219/J230) : une largeur en `vw`
     ignore l'ancrage. Défalquer l'ancrage + 12 px de marge. */
  width: min(460px, calc(100vw - 78px)); max-height: 66vh; overflow-y: auto;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(16, 16, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  color: #d7d7de;
  animation: panel-fade 0.15s ease-out;
}
#convo-panel h2 { font-size: var(--fs-lg); margin: 0 0 8px; color: #cfe3f5; position: relative; padding-right: 26px; }
#convo-panel h2 .panel-x { position: absolute; right: 0; top: -2px; }
#convo-panel .empty { color: #9a9aa6; font-size: var(--fs-md); font-style: italic; }
#convo-panel .cv-line { display: flex; gap: 8px; padding: 6px 0; font-size: var(--fs-md); border-bottom: 1px dashed rgba(255,255,255,0.07); }
#convo-panel .cv-ic { flex: 0 0 auto; opacity: 0.85; }
#convo-panel .cv-tx { flex: 1; min-width: 0; line-height: 1.35; color: #c3c8d2; }
#convo-panel .cv-tx b { color: #eaf2ff; }
#convo-panel .cv-sms .cv-tx b, #convo-panel .cv-recu .cv-tx b { color: #9fc3e8; }

/* --- Banc d'observation (J222) — serveur de test uniquement (DB_FOCUS) ------------------------
   Ancré à GAUCHE : la colonne d'outils occupe la droite, et un panneau large posé de ce côté
   rendrait ses boutons incliquables (piège J219). Le panneau vit en permanence et se rafraîchit
   chaque seconde ; il se replie sur son en-tête pour dégager la vue. */
#focus-panel {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 27;
  width: min(430px, calc(100vw - 24px));
  max-height: 58vh; overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid rgba(255, 214, 102, 0.35);
  border-radius: 12px;
  background: rgba(14, 14, 20, 0.94);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  color: #d7d7de;
  font-size: var(--fs-sm);
}
#focus-panel .fo-head { display: flex; align-items: center; gap: 8px; color: #ffd666; }
#focus-panel .fo-head b { text-transform: capitalize; }
#focus-panel .fo-clock { margin-left: auto; font-variant-numeric: tabular-nums; color: #cfe3ff; }
#focus-panel .fo-fold { background: none; border: none; color: #ffd666; font-size: var(--fs-lg); cursor: pointer; padding: 0 2px; }
#focus-panel .fo-sum { color: #9a9aa6; font-size: var(--fs-xs); margin: 4px 0 6px; }
#focus-panel .fo-rows { display: flex; flex-direction: column; gap: 1px; }
#focus-panel .fo-row {
  display: grid; grid-template-columns: 1fr 74px 84px 52px 40px;
  gap: 6px; align-items: center;
  padding: 4px 6px; border-radius: 7px; cursor: pointer;
}
#focus-panel .fo-row:hover { background: rgba(255, 255, 255, 0.07); }
#focus-panel .fo-row.active { background: rgba(255, 214, 102, 0.16); color: #ffe9a8; font-weight: 600; }
#focus-panel .fo-nm, #focus-panel .fo-act, #focus-panel .fo-zone { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#focus-panel .fo-act { color: #cfe3ff; }
#focus-panel .fo-zone { color: #9a9aa6; font-size: var(--fs-xs); }
#focus-panel .fo-num { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: #9a9aa6; text-align: right; }
#focus-panel .fo-bump { color: #e0a0a0; }
#focus-panel .fo-log { margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,0.1); max-height: 22vh; overflow-y: auto; }
#focus-panel .fo-line { font-size: var(--fs-xs); color: #b6b6c0; padding: 1px 0; }
#focus-panel .fo-h { color: #ffd666; font-variant-numeric: tabular-nums; }
#focus-panel .fo-foot { margin-top: 5px; font-size: var(--fs-xs); color: #9a9aa6; font-style: italic; }

/* --- Journal des conversations en fils (J223) -------------------------------------------------
   Une coulée de lignes ne se relit pas : on cherche « ce qu'a dit untel », pas « ce qui s'est dit
   à 14 h ». Le journal se regroupe donc par interlocuteur — vignette, nom, dernière réplique — et
   chaque bloc se déplie sur l'échange complet. */
#convo-panel .cv-fils { display: flex; flex-direction: column; gap: 6px; }
#convo-panel .cv-fil { border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; background: rgba(255,255,255,0.025); overflow: hidden; }
#convo-panel .cv-fil.open { border-color: rgba(159,195,232,0.35); background: rgba(159,195,232,0.06); }
#convo-panel .cv-tete { display: flex; align-items: center; gap: 9px; padding: 7px 9px; cursor: pointer; }
#convo-panel .cv-tete:hover { background: rgba(255,255,255,0.05); }
#convo-panel .cv-face { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 7px; image-rendering: pixelated; background: #2a2f3a; }
#convo-panel .cv-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#convo-panel .cv-id b { color: #eaf2ff; font-size: var(--fs-md); }
#convo-panel .cv-der { color: #9a9aa6; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#convo-panel .cv-cnt { flex: 0 0 auto; color: #9fc3e8; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
#convo-panel .cv-chev { flex: 0 0 auto; color: #9fc3e8; font-size: var(--fs-sm); }
#convo-panel .cv-fil .cv-log { padding: 2px 10px 8px 52px; }
#convo-panel .cv-line.moi .cv-tx b { color: #ffd666; }

/* --- Poste informatique : onglets (J226) ------------------------------------------------------
   Caméras de la ville, caméras posées et micros s'empilaient dans une seule colonne : on faisait
   défiler pour trouver. Trois onglets, comme les applications d'un vrai poste. */
#pubcam-panel .surv-tabs { display: flex; gap: 4px; margin-bottom: 7px; }
#pubcam-panel .surv-tab {
  flex: 1; padding: 6px 4px; font-size: var(--fs-xs); cursor: pointer;
  background: #10161a; color: #7f96a2; border: 1px solid rgba(120, 190, 210, 0.2);
  border-radius: 7px 7px 0 0; border-bottom-color: transparent;
}
#pubcam-panel .surv-tab:hover { background: #16222a; color: #b6d6e2; }
#pubcam-panel .surv-tab.active {
  background: #1a2b33; color: #9fe0f5; font-weight: 600;
  border-color: rgba(120, 190, 210, 0.55); border-bottom-color: transparent;
}

/* ---- J252 : formats larges ----
 * Les panneaux « document » étaient tous des colonnes de 480 à 620 px, sur un écran qui en fait
 * 1400 : on faisait défiler quarante cartes d'indice à la file alors que la place était là. */
@media (min-width: 1040px) {
  #casebook-panel { width: min(94vw, 940px); }
  #files-panel    { width: min(94vw, 880px); }
  #notebook-panel { width: min(94vw, 860px); }
  #registry-panel { width: min(94vw, 760px); }
  /* Le Dossier lit enfin comme un classeur ouvert : les fiches d'indice se rangent en colonnes,
   * on embrasse l'enquête d'un coup d'œil au lieu de la dérouler. */
  #casebook-panel .idx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    align-items: start;
  }
  #casebook-panel .xref-tbl { columns: 2; column-gap: 12px; }
  #casebook-panel .xref-row { break-inside: avoid; }
}

/* ---- J260 : le manuel du village, servi dans le jeu ----
 * Un livre qu'on ouvre, pas une page web : fond papier sombre, colonne de lecture, et des
 * VIGNETTES qui sont de vrais rendus du moteur (`Renderer.vignette`) — pas des schémas dessinés à
 * la main, qui auraient vieilli dès le jalon suivant.
 * Panneau CENTRÉ par `translate(-50%, -50%)` : il garde `panel-fade` et JAMAIS `panel-in`, qui
 * anime le `transform` et écraserait le centrage (piège J151). */
#manual-btn {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 362px); /* au-dessus de 📒 */
  z-index: 26; /* J210 : au-dessus du fond estompé (25) */
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(20, 20, 28, 0.85);
  font-size: var(--fs-xl);
  cursor: pointer; touch-action: manipulation;
}
#manual-panel {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 42;
  width: min(94vw, 720px); max-height: 86vh; overflow-y: auto;
  padding: 16px 20px 20px; border-radius: 14px;
  background: linear-gradient(180deg, #1a1712 0%, #14120f 100%);
  border: 1px solid rgba(203, 180, 136, 0.35);
  box-shadow: 0 14px 52px rgba(0, 0, 0, 0.85);
  color: #ded6c6;
  animation: panel-fade 0.15s ease-out;
}
#manual-panel h2 {
  font-size: var(--fs-xl); margin: 0 0 10px; color: #e6d3a8;
  position: relative; padding-right: 28px;
  border-bottom: 1px solid rgba(203, 180, 136, 0.28); padding-bottom: 8px;
}
#manual-panel h2 .panel-x { position: absolute; right: 0; top: -2px; }
#manual-panel .man-lead {
  font-size: var(--fs-sm); color: #a89a80; font-style: italic; margin: 0 0 14px; line-height: 1.45;
}
#manual-panel .man-chap { margin: 0 0 18px; }
#manual-panel .man-chap h3 {
  font-size: var(--fs-lg); margin: 0 0 8px; color: #e0c98f; letter-spacing: 0.01em;
}
#manual-panel .man-chap p {
  font-size: var(--fs-md); line-height: 1.55; margin: 0 0 7px; color: #ded6c6;
}
#manual-panel .man-chap p b { color: #f2e9d6; }
#manual-panel .man-vig {
  display: block; width: 100%; height: auto; margin: 0 0 10px;
  border-radius: 8px; border: 1px solid rgba(203, 180, 136, 0.22);
  image-rendering: pixelated; background: #0e0e12;
}
#manual-panel kbd {
  display: inline-block; min-width: 18px; padding: 1px 5px;
  border: 1px solid rgba(203, 180, 136, 0.4); border-bottom-width: 2px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  font: 700 var(--fs-xs)/1.5 ui-monospace, Consolas, monospace; color: #f2e9d6;
}
/* La colonne d'outils s'efface derrière le manuel comme derrière les autres panneaux larges. */
@media (max-width: 699px) {
  body:has(#manual-panel:not(.hidden)) #plan-btn,
  body:has(#manual-panel:not(.hidden)) #convo-btn,
  body:has(#manual-panel:not(.hidden)) #manual-btn { display: none; }
}

/* J355 — une fiche PARTIELLE (observations sur quelqu'un que la cellule n'a pas encore identifié)
   doit se lire d'un coup d'œil comme un dossier ouvert, pas comme un état civil. */
#cell-files .fiche-part { color: #c9a227; font-style: italic; font-weight: 400; }

/* J415 — L'écran de fin interactif (timeline). Palette et proportions de la maquette validée
   (`chantiers/timeline/canevas-v1.dc.html`) : encre chaude, rouge Kira, vert d'eau cellule. */
#timeline-screen {
  --tl-fond: #1c1a19; --tl-carte: #26221f; --tl-bord: #3a3533; --tl-texte: #ece5d6; --tl-doux: #a89f92;
  --tl-kira: #e27a66; --tl-cellule: #7cc0b8; --tl-accent: #c4503f;
  position: fixed; inset: 0; z-index: 96; overflow: auto;
  background: var(--tl-fond); color: var(--tl-texte);
  padding: 22px 26px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 16px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
#timeline-screen.hidden { display: none; }
#timeline-screen .tl-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--tl-bord); padding-bottom: 14px; flex-wrap: wrap; }
#timeline-screen .tl-sur { font-size: var(--fs-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tl-doux); }
#timeline-screen .tl-titre { margin: 4px 0 0; font-family: 'Shippori Mincho', serif; font-weight: 800; font-size: 34px; text-wrap: balance; }
#timeline-screen .tl-sous { color: var(--tl-doux); font-size: var(--fs-md); margin-top: 4px; }
#timeline-screen .tl-kira { text-align: right; }
#timeline-screen .tl-kira-nom { font-family: 'Shippori Mincho', serif; font-weight: 800; font-size: 24px; color: var(--tl-kira); }
#timeline-screen .tl-kira-metier { font-family: inherit; font-weight: 400; font-size: var(--fs-md); color: var(--tl-doux); }
#timeline-screen .tl-corps { display: flex; gap: 22px; flex-grow: 1; min-height: 0; }
#timeline-screen .tl-gauche { flex: 1.35; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#timeline-screen .tl-droite { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#timeline-screen .tl-puces { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#timeline-screen .tl-label { font-size: var(--fs-md); color: var(--tl-doux); }
#timeline-screen .tl-puce { display: flex; align-items: center; gap: 8px; padding: 7px 13px; min-height: 38px; border-radius: 999px; cursor: pointer; font-size: var(--fs-md); color: var(--tl-texte); background: transparent; border: 1px solid #4a433f; }
#timeline-screen .tl-puce.on { background: #3a3230; border-color: var(--tl-accent); }
#timeline-screen .tl-pastille { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
#timeline-screen .tl-carte { position: relative; align-self: center; max-width: 100%; background: var(--tl-carte); border: 1px solid var(--tl-bord); border-radius: 10px; overflow: hidden; line-height: 0; }
#timeline-screen .tl-carte canvas { display: block; max-width: 100%; max-height: 52vh; height: auto; image-rendering: pixelated; }
#timeline-screen .tl-bulle { position: absolute; width: 230px; padding: 9px 11px; background: var(--tl-texte); color: var(--tl-fond); border-radius: 8px; font-size: var(--fs-md); line-height: 1.35; pointer-events: none; }
#timeline-screen .tl-bulle.hidden { display: none; }
#timeline-screen .tl-horloge { position: absolute; left: 12px; bottom: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 20px; line-height: 1; color: var(--tl-texte); text-shadow: 0 1px 3px #000; }
#timeline-screen .tl-frise { display: flex; flex-direction: column; gap: 6px; }
#timeline-screen .tl-reperes { position: relative; height: 26px; }
#timeline-screen .tl-repere { position: absolute; top: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--tl-accent); background: var(--tl-carte); color: #fff7f0; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; padding: 0; }
#timeline-screen .tl-repere.passe { background: var(--tl-accent); }
#timeline-screen .tl-curseur { display: flex; align-items: center; gap: 12px; font-size: var(--fs-md); color: var(--tl-doux); font-variant-numeric: tabular-nums; }
#timeline-screen .tl-curseur span { width: 44px; }
#timeline-screen .tl-curseur span:last-child { text-align: right; }
#timeline-screen .tl-curseur input { flex-grow: 1; accent-color: var(--tl-accent); }
#timeline-screen .tl-cmd { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#timeline-screen .tl-btn { padding: 10px 14px; min-height: 44px; background: #2d2926; color: var(--tl-texte); border: 1px solid #4a433f; border-radius: 8px; cursor: pointer; font-size: var(--fs-md); }
#timeline-screen .tl-btn-fort { background: var(--tl-accent); color: #fff7f0; border: 0; font-weight: 600; }
#timeline-screen .tl-btn:focus-visible, #timeline-screen .tl-puce:focus-visible, #timeline-screen .tl-onglet:focus-visible, #timeline-screen .tl-repere:focus-visible { outline: 2px solid var(--tl-texte); outline-offset: 2px; }
#timeline-screen .tl-aide { font-size: var(--fs-md); color: var(--tl-doux); }
#timeline-screen .tl-journal { flex-grow: 1; min-height: 140px; overflow: auto; background: #221f1d; border: 1px solid var(--tl-bord); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
#timeline-screen .tl-liste { display: flex; flex-direction: column; }
#timeline-screen .tl-ligne { display: flex; gap: 10px; text-align: left; background: transparent; border: 0; color: var(--tl-texte); font-size: var(--fs-md); padding: 6px 4px; cursor: pointer; border-radius: 6px; line-height: 1.35; }
#timeline-screen .tl-ligne:hover { background: #2b2724; }
#timeline-screen .tl-t { font-family: 'IBM Plex Mono', monospace; color: var(--tl-doux); width: 48px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
#timeline-screen .tl-onglets { display: flex; gap: 6px; background: var(--tl-carte); border: 1px solid var(--tl-bord); border-radius: 10px; padding: 5px; }
#timeline-screen .tl-onglet { flex-grow: 1; padding: 10px 8px; min-height: 44px; border: 0; border-radius: 7px; cursor: pointer; font-size: var(--fs-md); font-weight: 600; color: var(--tl-texte); background: transparent; }
#timeline-screen .tl-onglet.on { color: var(--tl-fond); background: var(--tl-texte); }
#timeline-screen .tl-panneau { display: flex; flex-direction: column; gap: 10px; overflow: auto; min-height: 0; }
#timeline-screen .tl-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#timeline-screen .tl-regard { border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
#timeline-screen .tl-regard.tl-kira { background: #2a1f1d; border: 1px solid #5a3a33; text-align: left; }
#timeline-screen .tl-regard.tl-cellule { background: #1d2524; border: 1px solid #34504d; }
#timeline-screen .tl-regard-titre { font-family: 'Shippori Mincho', serif; font-weight: 800; font-size: 19px; }
#timeline-screen .tl-regard.tl-kira .tl-regard-titre { color: var(--tl-kira); }
#timeline-screen .tl-regard.tl-cellule .tl-regard-titre { color: var(--tl-cellule); }
#timeline-screen .tl-su { font-size: var(--fs-md); line-height: 1.4; }
#timeline-screen .tl-vide { font-size: var(--fs-md); color: var(--tl-doux); }
#timeline-screen .tl-toile { width: 100%; max-height: 380px; background: var(--tl-carte); border: 1px solid var(--tl-bord); border-radius: 10px; }
#timeline-screen .tl-occasion { text-align: left; background: var(--tl-carte); border: 1px solid var(--tl-bord); border-radius: 10px; padding: 12px 14px; color: var(--tl-texte); cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-lg); line-height: 1.4; }
#timeline-screen .tl-occasion:hover { border-color: var(--tl-accent); }
#timeline-screen .tl-occasion:focus-visible { outline: 2px solid var(--tl-texte); outline-offset: 2px; }
#timeline-screen .tl-occasion-t { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-md); color: #e0a48f; }
#timeline-screen .tl-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#timeline-screen .tl-chiffre { background: var(--tl-carte); border: 1px solid var(--tl-bord); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
#timeline-screen .tl-chiffre-v { font-family: 'Shippori Mincho', serif; font-weight: 800; font-size: 28px; font-variant-numeric: tabular-nums; }
#timeline-screen .tl-actions { margin-top: auto; display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 900px) {
  #timeline-screen { padding: 14px 16px; }
  #timeline-screen .tl-corps { flex-direction: column; }
  #timeline-screen .tl-titre { font-size: 26px; }
  #timeline-screen .tl-deux, #timeline-screen .tl-chiffres { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { #timeline-screen * { transition: none !important; } }

/* ============================================================================================
 * J441 — DA DES PANNEAUX, LOT 1 : LE SYSTÈME ET LES OUTILS (chantier `chantiers/da-panneaux/`).
 *
 * Le monde est en pixel art LPC ; les panneaux parlaient une autre langue — une appli sombre aux
 * coins ronds, la police du système. Ils prennent la matière du village (canevas du J440) :
 * laque, washi, encre, vermillon, or — et l'AMBRE pour les outils, la convention J269 « l'interface
 * en ambre, le monde en blanc ». Trois familles : CONTENANT (papier dans un cadre laqué), ÉCRAN
 * (un appareil), OUTIL (l'ambre). Ce lot pose le système et habille les outils ; les contenants
 * et les écrans suivent (lots 2 et 3).
 *
 * Les règles d'origine restent plus haut : cette section ne fait que les SURCHARGER, à
 * spécificité égale, parce qu'elle vient après. Un panneau qu'elle ne nomme pas n'a pas bougé.
 * ========================================================================================== */
@font-face {
  font-family: 'DotGothic16';
  src: url('../assets/fonts/dotgothic16-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
  font-display: swap;
}
@font-face {
  font-family: 'DotGothic16';
  src: url('../assets/fonts/dotgothic16-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4;
  font-display: swap;
}
:root {
  --laque: #2a1714;      /* les cadres des contenants */
  --laque-clair: #5a2e22;
  --washi: #efe4cc;      /* le papier */
  --washi-ombre: #e3d4b3;
  --encre: #2b2118;      /* le texte sur papier */
  --encre-douce: #5c4a36;
  --ambre: #e8a33d;      /* les outils (J269) */
  --ambre-nuit: #1d1712; /* le fond d'un outil */
  --ambre-cendre: #3a2c20;
  --vermillon: #b8322a;  /* les sceaux */
  --or: #c99a3b;         /* les liserés */
  --pixel: 'DotGothic16', ui-monospace, monospace;   /* titres, boutons, étiquettes — jamais le texte long */
  /* Le coin cranté : quatre marches au lieu d'un arrondi. Une seule définition, que chaque cadre
   * reprend — la même question tranchée à un seul endroit (piège J313). */
  --cran: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
  --cran4: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}

/* ---- OUTIL : les pastilles du haut ---- */
.hud-pill {
  border-radius: 0;
  clip-path: var(--cran4);
  background: rgba(29, 23, 18, 0.92);
  border: 0;
  box-shadow: inset 0 0 0 2px rgba(232, 163, 61, 0.35);
  color: var(--washi);
  backdrop-filter: none;
}
.hud-pill--muted { color: #c9b896; }

/* ---- OUTIL : le bouton de fermeture universel ---- */
.panel-x {
  border-radius: 0; clip-path: var(--cran4);
  border: 0; background: var(--ambre-cendre); color: var(--washi);
  font-family: var(--pixel);
}

/* ---- OUTIL : le menu ⚡ et son bouton ---- */
#actions-btn {
  border-radius: 0; clip-path: var(--cran);
  background: var(--ambre); color: var(--ambre-nuit);
  font-family: var(--pixel); font-weight: 400;
  box-shadow: none;
}
#actions-btn .act-count {
  border-radius: 0; background: var(--ambre-nuit); color: var(--ambre);
  font-family: var(--pixel); font-weight: 400;
}
#actions-panel {
  border-radius: 0; clip-path: var(--cran);
  border: 0;
  background: var(--ambre-nuit);
  box-shadow: inset 0 0 0 3px var(--ambre);
  color: var(--washi);
}
#actions-panel h2 { font-family: var(--pixel); font-weight: 400; color: var(--ambre); }
#actions-panel .act-row {
  border-radius: 0; clip-path: var(--cran4);
  border: 0; background: var(--ambre-cendre); color: var(--washi);
}
#actions-panel .act-row:active { background: #4a3826; }
/* Ce qui est jouable ICI ressort en AMBRE PLEIN : la promesse stricte (J269) se lit d'un coup d'œil. */
#actions-panel .act-row.act-hot { border-left: 0; background: var(--ambre); color: var(--ambre-nuit); font-weight: 700; }
#actions-panel .act-row.act-hot::before { color: var(--ambre-nuit); }
#actions-panel .act-row.act-off { opacity: 1; background: #2a2018; color: #a99880; border-left: 0; }   /* mesuré J441 : à 0,78 d'opacité, 4,0:1 — sous le seuil ; la couleur seule tient 5,7:1 */
#actions-panel .act-row .act-why { color: #a99880; }
#actions-panel .act-filter button {
  border-radius: 0; clip-path: var(--cran4); border: 0;
  background: var(--ambre-cendre); color: #f3d39a; font-family: var(--pixel); font-weight: 400;
}
#actions-panel .act-grp { font-family: var(--pixel); color: var(--ambre); border-bottom: 2px solid #4a3826; }
#actions-panel .act-grp .act-grp-n { color: #c9b896; }
#actions-panel .act-grp.act-grp-off { color: #a99880; }

/* ---- OUTIL : les notifications ---- */
.toast-line {
  border-radius: 0; clip-path: var(--cran4);
  border: 0; background: rgba(29, 23, 18, 0.96); color: var(--washi);
  box-shadow: inset 0 0 0 2px rgba(232, 163, 61, 0.3);
}
.toast-clef, .toast-alerte { border-radius: 0; border-left-width: 0; }
.toast-clef { background: rgba(29, 23, 18, 0.97); color: #f6e2b8; box-shadow: inset 0 0 0 2px var(--ambre); }
.toast-alerte { background: rgba(43, 14, 12, 0.97); color: #ffd9d2; box-shadow: inset 0 0 0 2px var(--vermillon); }
.toast-clef .toast-bar { background: var(--ambre); }
.toast-alerte .toast-bar { background: var(--vermillon); }
/* J467 — LA COULEUR DIT LA CATÉGORIE, LA FORME DIT LE NIVEAU (canevas validé par Charly). Six
 * catégories, déduites en JS de l'émoji de tête (`categorieToast`, net.js) ; un refus est gris. */
.toast-cat-danger   { --cat: #e5533d; --cat-fond: rgba(43, 14, 12, 0.97); --cat-texte: #ffd9d2; --cat-titre: #ff9b8a; }
.toast-cat-enquete  { --cat: #e8a33d; --cat-fond: rgba(36, 27, 14, 0.97); --cat-texte: #f6e2b8; --cat-titre: #f2c27a; }
.toast-cat-contacts { --cat: #5b9bd5; --cat-fond: rgba(16, 24, 36, 0.96); --cat-texte: #dbe8f7; --cat-titre: #9cc3ea; }
.toast-cat-police   { --cat: #9b7fd4; --cat-fond: rgba(26, 18, 40, 0.96); --cat-texte: #e6dcfa; --cat-titre: #c3b0ec; }
.toast-cat-objets   { --cat: #5fae6e; --cat-fond: rgba(14, 30, 20, 0.96); --cat-texte: #d6f0dc; --cat-titre: #93d0a0; }
.toast-cat-systeme  { --cat: #8a8f98; --cat-fond: rgba(24, 24, 28, 0.95); --cat-texte: #d6d8dc; --cat-titre: #b4b8bf; }
.toast-line[class*="toast-cat-"] { background: var(--cat-fond); color: var(--cat-texte); box-shadow: inset 0 0 0 2px var(--cat); text-align: left; }
.toast-alerte[class*="toast-cat-"] { box-shadow: inset 0 0 0 2px var(--cat), 0 6px 22px color-mix(in srgb, var(--cat) 30%, transparent); }
.toast-line[class*="toast-cat-"] .toast-bar { background: var(--cat); }
.toast-cat { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cat-titre); margin-bottom: 2px; }
.toast-clef, .toast-alerte { width: 100%; box-sizing: border-box; }
/* J468 — LE JOURNAL DES NOTIFICATIONS : la cloche sous la porte de sortie, le panneau à côté de la
 * colonne des notifications. La pastille compte ce qui n'a pas pu être lu à l'écran. */
#notifs-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 26;
  width: 44px; height: 44px;
  border: 0; border-radius: 0; clip-path: var(--cran4);
  background: var(--ambre-cendre); color: var(--washi);
  font-size: var(--fs-xl);
  cursor: pointer; touch-action: manipulation;
}
#notifs-btn.a-lire::after {
  content: attr(data-badge);
  position: absolute; top: 5px; right: 5px;
  min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box;
  background: var(--vermillon); color: #fff;
  font: 700 var(--fs-micro)/16px system-ui, sans-serif; text-align: center;
}
#notifs-btn:focus-visible { outline: 2px solid var(--ambre); outline-offset: 2px; }
/* Journal ouvert : la colonne des notifications se retire — il les montre déjà, et elle transparaissait dessous. */
body:has(#notifs-panel:not(.hidden)) #toast { display: none; }
#notifs-panel {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  right: calc(env(safe-area-inset-right, 0px) + 68px);
  z-index: 30;
  width: min(440px, calc(100vw - 80px)); max-height: 72vh; overflow-y: auto; box-sizing: border-box;
  padding: 14px 16px 12px;
  background: rgba(29, 23, 18, 0.98); color: var(--washi);
  box-shadow: inset 0 0 0 2px var(--ambre), 0 12px 40px rgba(0, 0, 0, 0.6);
  clip-path: var(--cran4);
}
#notifs-panel h2 { font-size: var(--fs-lg); margin: 0 0 10px; color: var(--ambre); position: relative; padding-right: 30px; }
#notifs-panel h2 .panel-x { position: absolute; right: 0; top: -2px; }
#notifs-panel .empty { color: #b8a888; font-size: var(--fs-md); font-style: italic; }
#notifs-panel .nj-filtres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#notifs-panel .nj-filtre { border: 0; padding: 5px 9px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  background: var(--cat-fond, #2a2018); color: var(--cat-texte, var(--washi)); box-shadow: inset 0 0 0 2px var(--cat, #6b5a44); }
#notifs-panel .nj-filtre.actif { background: var(--cat, var(--ambre)); color: #1a130c; }
#notifs-panel .nj-jour { padding: 8px 2px 4px; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: #b8a888; }
#notifs-panel .nj-ligne { display: grid; grid-template-columns: 52px 6px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 7px 2px; border-top: 1px solid #3a2d20; font-size: var(--fs-md); line-height: 1.4; color: var(--cat-texte); }
#notifs-panel .nj-h { font-size: var(--fs-sm); color: #c9bba3; font-variant-numeric: tabular-nums; }
#notifs-panel .nj-pas { width: 6px; height: 18px; background: var(--cat); }
#notifs-panel .nj-pied { margin-top: 8px; font-size: var(--fs-sm); color: #b8a888; }
@media (max-width: 699px) {
  /* Sur téléphone, le flanc droit est trop étroit : la colonne prend la largeur, en haut. */
  #toast { top: calc(env(safe-area-inset-top, 0px) + 96px); left: 8px; right: 8px; width: auto; align-items: stretch; }
  #notifs-panel { right: 8px; top: calc(env(safe-area-inset-top, 0px) + 116px); width: calc(100vw - 16px); }
}

/* ---- OUTIL : la bannière d'événement et le rappel de journée ---- */
#event-banner {
  border-radius: 0; clip-path: var(--cran);
  border: 0; background: rgba(29, 23, 18, 0.95);
  box-shadow: inset 0 0 0 3px var(--ambre); color: var(--washi);
}
#goals-panel {
  border-radius: 0; clip-path: var(--cran);
  border: 0; background: rgba(29, 23, 18, 0.92);
  box-shadow: inset 0 0 0 2px rgba(232, 163, 61, 0.45);
}
#goals-panel h3 { font-family: var(--pixel); font-weight: 400; color: var(--ambre); }
.gl-row { color: var(--washi); }
.gl-sub, .gl-num { color: #c9b896; }
.gl-bar { border-radius: 0; background: rgba(239, 228, 204, 0.12); }
.gl-fill { background: var(--ambre); }

/* ---- OUTIL : la colonne de boutons et les boutons d'icône ---- */
#mute-btn, #keys-btn, #plan-btn, #quit-btn, #inv-btn, #manual-btn, #profile-btn, #convo-btn, #tuto-btn, #spectate-btn, #ghost-btn {
  border-radius: 0; clip-path: var(--cran4);
  border: 0; background: rgba(29, 23, 18, 0.92);
  box-shadow: inset 0 0 0 2px rgba(232, 163, 61, 0.4);
  color: var(--washi);
}
/* Le geste du moment (E) : l'ambre plein, comme une entrée jouable du menu. */
#interact-btn, #stairs-btn {
  border-radius: 0; clip-path: var(--cran);
  background: var(--ambre); color: var(--ambre-nuit);
  font-family: var(--pixel); font-weight: 400;
}
/* Les deux CONTENANTS qui ont un bouton : un onglet laqué — or pour le dossier, vermillon pour le carnet. */
#casebook-btn, #notebook-btn {
  border-radius: 0; clip-path: var(--cran4);
  border: 0; background: var(--laque); color: var(--washi);
  font-family: var(--pixel); font-weight: 400;
}
#casebook-btn { box-shadow: inset 0 0 0 2px var(--or); }
#notebook-btn { box-shadow: inset 0 0 0 2px var(--vermillon); }
/* Les badges de rôle : un outil, avec le liseré de son camp. */
#investigator-badge, #kira-badge {
  border-radius: 0; clip-path: var(--cran4);
  border: 0; background: rgba(29, 23, 18, 0.94); color: var(--washi);
  font-family: var(--pixel); font-weight: 400;
}
#investigator-badge { box-shadow: inset 0 0 0 2px var(--or); }
#kira-badge { box-shadow: inset 0 0 0 2px var(--vermillon); }

/* Le coin cranté (`clip-path`) rogne tout ce qui dépasse, le contour de focus compris (revue J441) :
 * le focus clavier se dessine donc À L'INTÉRIEUR du cadre, en blanc — il doit se voir partout. */
.panel-x:focus-visible, #actions-btn:focus-visible, #actions-panel .act-row:focus-visible, #actions-panel .act-filter button:focus-visible,
#mute-btn:focus-visible, #keys-btn:focus-visible, #plan-btn:focus-visible, #quit-btn:focus-visible, #inv-btn:focus-visible,
#manual-btn:focus-visible, #profile-btn:focus-visible, #convo-btn:focus-visible, #tuto-btn:focus-visible, #spectate-btn:focus-visible,
#ghost-btn:focus-visible, #interact-btn:focus-visible, #stairs-btn:focus-visible, #casebook-btn:focus-visible, #notebook-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px #ffffff;
}

/* ============================================================================================
 * J442 — DA DES PANNEAUX, LOT 2a : LE CADRE DES CONTENANTS.
 *
 * Tout ce qui se lit comme un objet qu'on tient — dossier, fichier, poche, profil, registre,
 * journal des conversations, briefings, appels, interrogatoire — prend le CADRE LAQUÉ du canevas :
 * fond laque, liseré or, coin cranté, en-tête en police pixel. L'intérieur garde ses composants,
 * passés en texte washi sur laque (lisibles tels quels : ils étaient écrits pour un fond sombre).
 * Le PAPIER à l'intérieur du dossier est le lot 2b. Le carnet de Kira garde son allure de Death
 * Note : c'est un objet de la fiction, pas un panneau d'interface.
 * ========================================================================================== */
#casebook-panel, #files-panel, #inv-panel, #profile-panel, #registry-panel, #convo-panel, #show-panel,
#cellcall-panel, #dialog-panel, #interro-panel, #answer-panel, #control-panel, #spectate-panel, #plan-panel, #keys-panel {
  border-radius: 0;
  clip-path: var(--cran);
  border: 0;
  background: var(--laque);
  color: var(--washi);
  box-shadow: inset 0 0 0 3px var(--or), inset 0 0 0 6px var(--laque);
}
#casebook-panel h2, #files-panel h2, #inv-panel h2, #profile-panel h2, #registry-panel h2, #convo-panel h2, #show-panel h2,
#cellcall-panel h2, #dialog-panel h2, #interro-panel h2, #answer-panel h2, #control-panel h2, #spectate-panel h2, #plan-panel h2, #keys-panel h2,
#show-panel h3, #cellcall-panel h3 {
  font-family: var(--pixel);
  font-weight: 400;
  color: var(--washi);
  letter-spacing: 0.02em;
}
/* La poche sortait par le HAUT de l'écran (trouvé en capturant le lot 2a) : ancrée à 206 px du bas,
 * avec 78 % de la hauteur, elle dépassait de 30 px sur un écran de 800. Elle tient désormais dans
 * la place qu'elle a au-dessus du bouton ⚡ (et la marge du haut pour les pastilles). */
#inv-panel { max-height: min(78vh, calc(100vh - 206px - 64px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px))); }
/* Le dossier avait un en-tête KRAFT (dégradé) : texte washi dessus, illisible — la mesure de contraste
 * ne voit pas un dégradé, l'œil oui (J442). L'en-tête passe en laque ; le tampon devient un sceau
 * vermillon plein, lisible (washi sur vermillon, 5,0:1). Le papier de ce dossier est le lot 2b. */
#casebook-panel h2 { background: var(--laque); border-bottom: 2px solid var(--or); color: var(--washi); font-family: var(--pixel); font-weight: 400; }
#casebook-panel h2 .panel-x { color: var(--washi); }
.cb-stamp { font-family: var(--pixel); font-weight: 400; color: var(--washi); background: var(--vermillon); border: 0; border-radius: 0; clip-path: var(--cran4); opacity: 1; }
.gl-chev { color: #c9b896; }   /* 3,6:1 en gris froid — mesuré J442 */

/* ============================================================================================
 * J443 — DA DES PANNEAUX, LOT 2b : LE PAPIER DU DOSSIER.
 *
 * Le dossier d'enquête devient ce que le canevas promettait : du WASHI dans un cadre laqué, l'encre
 * pour le texte, le vermillon pour les sceaux. Le cadre est une BORDURE (10 px de laque) et non une
 * ombre : une ombre intérieure se laisse recouvrir par le contenu qui défile, une bordure non.
 *
 * Règle J271 tenue partout : chaque fond redéfini ici redéfinit AUSSI la couleur de son texte —
 * le dossier a déjà été illisible à 1,09:1 pour un fond changé sans sa couleur.
 * ========================================================================================== */
#casebook-panel {
  background: var(--washi); color: var(--encre);
  border: 10px solid var(--laque);
  box-shadow: inset 0 0 0 2px var(--or);
}
#casebook-panel h2 { margin: 0 -16px 12px; }
#casebook-panel .empty { color: var(--encre-douce); }
#casebook-panel .hint { background: var(--washi-ombre); color: var(--encre); border: 0; border-radius: 0; clip-path: var(--cran4); }
#casebook-panel .death { border-bottom: 1px dashed rgba(43, 33, 24, 0.25); }
#casebook-panel .death .meta { color: var(--encre-douce); }
#casebook-panel .sep { color: #7a4a1c; }
#casebook-panel .cb-qui { font-size: var(--fs-xs); color: var(--encre-douce); }
#casebook-panel .cb-casier { font-size: var(--fs-xs); color: var(--vermillon); font-weight: 700; }
/* Les intercalaires : des onglets de papier plus foncé ; celui qui est ouvert, en laque. */
#casebook-panel .chip-row { border-bottom: 2px solid var(--laque); }
#casebook-panel .chip { border-radius: 0; border: 0; background: var(--washi-ombre); color: var(--encre); font-family: var(--pixel); font-weight: 400; }
#casebook-panel .chip.on { background: var(--laque); color: var(--washi); font-weight: 400; }
/* Les fiches d'indices : un papier un ton plus sombre, l'encre dessus. */
#casebook-panel .idx-card { background: var(--washi-ombre); color: var(--encre); border: 0; border-left: 4px solid #a08a62; border-radius: 0; box-shadow: none; }
#casebook-panel .idx-txt { color: var(--encre); }
#casebook-panel .idx-chip { color: #7a4a1c; font-family: var(--pixel); font-weight: 400; }
/* Les recoupements : une ligne de registre, le score en sceau. */
#casebook-panel .xref-row { background: var(--washi-ombre); color: var(--encre); border: 0; border-left: 4px solid #a08a62; border-radius: 0; }
#casebook-panel .xref-row.xr-hot { border-left-color: var(--vermillon); }
#casebook-panel .xref-row.xr-warm { border-left-color: #c07a20; }
#casebook-panel .xref-row.xr-cold { border-left-color: #6b7a8a; }
#casebook-panel .xref-row .xr-job { color: var(--encre-douce); }
#casebook-panel .xref-row .xr-score { background: transparent; color: var(--vermillon); border: 2px solid var(--vermillon); border-radius: 0; font-family: var(--pixel); font-weight: 400; }
#casebook-panel .xr-chip { background: var(--encre); color: var(--washi); border-radius: 0; font-family: var(--pixel); }
/* Les nouveautés : un bandeau d'ambre, la seule marque d'OUTIL dans le papier. */
#casebook-panel .cb-neuf { background: var(--ambre); color: var(--ambre-nuit); border: 0; border-radius: 0; clip-path: var(--cran4); }
#casebook-panel .cb-neuf button { background: var(--ambre-nuit); color: var(--ambre); border: 0; border-radius: 0; font-family: var(--pixel); font-weight: 400; }
#casebook-panel .cb-neuf-pastille { background: var(--ambre-nuit); color: var(--ambre); border-radius: 0; }
#casebook-panel .lab-send { background: var(--laque); color: var(--washi); border-radius: 0; font-family: var(--pixel); font-weight: 400; }
/* Le vermillon des aplats (#B8322A) ne tient que 4,1:1 en TEXTE sur le papier foncé — mesuré J443.
 * Un sceau ÉCRIT prend le vermillon d'encre, plus sombre. */
:root { --vermillon-encre: #8f241e; }
#casebook-panel .xref-row .xr-score { color: var(--vermillon-encre); border-color: var(--vermillon-encre); }
#casebook-panel .cb-casier { color: var(--vermillon-encre); }

/* ============================================================================================
 * J444 — DA DES PANNEAUX, LOT 3 : LES ÉCRANS.
 *
 * Téléphone, console de surveillance, télé : des APPAREILS (canevas du J440). Une coque grise
 * crantée, une dalle presque noire, le texte en gris-bleu clair, l'accent en vert d'eau, les
 * étiquettes en police pixel. Les arrondis d'une appli de smartphone disparaissent — sauf ce qui
 * est rond dans l'objet (les molettes, le témoin d'allumage).
 *
 * La GAZETTE n'est pas un écran : c'est un journal qu'on lit à un point média. Elle prend le
 * papier du dossier (lot 2b) — washi, encre, cadre laqué — plutôt qu'une coque d'appareil.
 *
 * Règle J271 tenue partout : chaque fond redéfini ici redéfinit aussi la couleur de son texte.
 * ========================================================================================== */
:root {
  --coque: #3a4048;        /* le boîtier d'un appareil */
  --coque-liseré: #555d67;
  --dalle: #0f161c;        /* l'écran éteint */
  --dalle-ligne: #16212a;  /* une ligne de liste sur l'écran */
  --dalle-touche: #1d2a33; /* une touche, une icône */
  --lueur: #d6e2ea;        /* le texte d'un écran */
  --lueur-douce: #9aabb8;
  --vert-d-eau: #8fd3c9;   /* l'accent d'un écran */
}

/* ---- ÉCRAN : le téléphone ---- */
#phone-panel .phone-device {
  border-radius: 0; clip-path: var(--cran);
  border: 0; background: var(--coque);
  box-shadow: inset 0 0 0 3px var(--coque-liseré);
}
#phone-panel .phone-ear, #phone-panel .phone-home { border-radius: 0; background: #1b1f24; }
#phone-panel .phone-screen { border-radius: 0; background: var(--dalle); color: var(--lueur); box-shadow: inset 0 0 0 2px var(--dalle-touche); }
#phone-panel .phone-status { font-family: var(--pixel); font-weight: 400; color: var(--vert-d-eau); background: transparent; }
#phone-panel .phone-title { font-family: var(--pixel); font-weight: 400; color: var(--lueur); }
#phone-panel .phone-back { color: var(--vert-d-eau); }
#phone-panel .sep { font-family: var(--pixel); font-weight: 400; color: var(--vert-d-eau); }
#phone-panel .empty { color: var(--lueur-douce); }
#phone-panel .phone-appicon { color: var(--lueur); }
#phone-panel .phone-appicon .ai-ic { border-radius: 0; clip-path: var(--cran4); background: var(--dalle-touche); box-shadow: none; }
#phone-panel .phone-appicon .ai-lb { font-family: var(--pixel); }
#phone-panel .phone-appicon .ai-badge { border-radius: 0; background: var(--vermillon); color: var(--washi); }
#phone-panel .phone-contact, #phone-panel .phone-thread {
  border-radius: 0; clip-path: var(--cran4);
  border: 0; margin-bottom: 6px; padding: 8px 10px;
  background: var(--dalle-ligne); color: var(--lueur);
}
#phone-panel .phone-contact:hover, #phone-panel .phone-thread:hover { background: var(--dalle-touche); }
#phone-panel .pc-av { border-radius: 0; clip-path: var(--cran4); background: var(--dalle-touche); color: var(--vert-d-eau); font-family: var(--pixel); font-weight: 400; }
#phone-panel .pc-nm i { color: var(--lueur-douce); }
#phone-panel .pc-go { color: var(--vert-d-eau); }   /* mesuré J444 : 2,9:1 en gris-vert, sous le seuil */
#phone-panel .pc-cdnm { font-family: var(--pixel); font-weight: 400; }
#phone-panel .pc-cdrel { color: var(--vert-d-eau); }
#phone-panel .phone-act { border-radius: 0; clip-path: var(--cran4); font-family: var(--pixel); font-weight: 400; }
/* Blanc sur vert ou sur bleu vif : 3,4:1. L'appel prend l'accent de l'écran, le message une touche. */
#phone-panel .phone-act.call { background: var(--vert-d-eau); color: var(--dalle); }
#phone-panel .phone-act.sms { background: var(--dalle-touche); color: var(--lueur); box-shadow: inset 0 0 0 2px var(--vert-d-eau); }
#phone-panel .phone-act.hang { background: var(--vermillon); color: var(--washi); }
#phone-panel .phone-incall { border-radius: 0; background: var(--dalle-touche); color: var(--vert-d-eau); }
#phone-panel .phone-incall button { border-radius: 0; background: var(--vermillon); color: var(--washi); }
#phone-panel .cs-line { border-radius: 0; background: var(--dalle-ligne); color: var(--lueur); }
#phone-panel .sms-bubble { border-radius: 0; }
#phone-panel .sms-bubble.me { background: var(--vert-d-eau); color: var(--dalle); }
#phone-panel .sms-bubble.them { background: var(--dalle-touche); color: var(--lueur); }
/* Le compositeur : on choisit son message dans une liste (pas de saisie libre) — des touches. */
#phone-panel .sms-compose { border-top: 2px solid var(--dalle-touche); }
#phone-panel .sms-compose-h { font-family: var(--pixel); color: var(--vert-d-eau); }
#phone-panel .sms-choice { border-radius: 0; clip-path: var(--cran4); border: 0; background: var(--dalle-ligne); color: var(--lueur); }
#phone-panel .sms-choice:hover { background: var(--dalle-touche); }
#phone-panel .tel-row .t { color: var(--vert-d-eau); }
#phone-panel .tel-row button { border-radius: 0; clip-path: var(--cran4); border: 0; background: var(--dalle-touche); color: var(--lueur); }
#phone-panel .tel-row button:hover { background: #26363f; }

/* ---- ÉCRAN : la console de surveillance ---- */
#pubcam-panel .surv-console {
  border-radius: 0; clip-path: var(--cran);
  border: 0; background: var(--coque);
  box-shadow: inset 0 0 0 3px var(--coque-liseré);
}
#pubcam-panel .surv-head { font-family: var(--pixel); font-weight: 400; color: var(--vert-d-eau); }
#pubcam-panel .surv-head .panel-x { background: var(--ambre-cendre); color: var(--washi); }
#pubcam-panel .surv-live { color: #9ff0c0; }
#pubcam-panel .surv-monitor { border-radius: 0; border: 0; background: var(--dalle); box-shadow: inset 0 0 0 2px var(--dalle-touche); }
#pubcam-panel .surv-crt { border-radius: 0; }
#pubcam-panel .surv-osd { font-family: var(--pixel); font-weight: 400; }
/* « aucun signal » : 2,65:1 en vert sombre sur la dalle noire — mesuré J440, le texte le moins lisible du jeu. */
#pubcam-panel .surv-nosignal { color: #7fa892; font-family: var(--pixel); font-weight: 400; }
#pubcam-panel .surv-tab {
  border-radius: 0; clip-path: var(--cran4); border: 0;
  background: var(--dalle-ligne); color: var(--lueur-douce); font-family: var(--pixel);
}
#pubcam-panel .surv-tab:hover { background: var(--dalle-touche); color: var(--lueur); }
#pubcam-panel .surv-tab.active { background: var(--dalle-touche); color: var(--vert-d-eau); font-weight: 400; box-shadow: inset 0 0 0 2px var(--vert-d-eau); }
#pubcam-panel button.cam-pick { border-radius: 0; clip-path: var(--cran4); border: 0; background: var(--dalle-ligne); color: var(--lueur); }
#pubcam-panel button.cam-pick.active { background: var(--dalle-touche); color: var(--lueur); box-shadow: inset 0 0 0 2px var(--vert-d-eau); }
#pubcam-panel .surv-off { border-radius: 0; clip-path: var(--cran4); background: var(--dalle-touche); color: var(--lueur); font-family: var(--pixel); }
#pubcam-panel .surv-off:hover { background: #26363f; }

/* ---- ÉCRAN : la télé ---- */
#tv-panel .tv-frame {
  border-radius: 0; clip-path: var(--cran);
  border: 0; background: var(--coque);
  box-shadow: inset 0 0 0 3px var(--coque-liseré);
}
#tv-panel .tv-brand { font-family: var(--pixel); font-weight: 400; color: var(--lueur); }
#tv-panel .tv-brand b { color: #ff9aa8; }          /* 5,2:1 sur la coque */
#tv-panel .tv-model { color: #aab4bf; }            /* 2,6:1 avant (gris sur gris) — mesuré J444 */
#tv-panel .tv-grille { border-radius: 0; }
#tv-panel .tv-feet i { border-radius: 0; background: #2a2f36; }
#tv-panel .tv-screen { border-radius: 0; background: var(--dalle); color: var(--lueur); }
#tv-panel .tv-head { font-family: var(--pixel); font-weight: 400; }
#tv-panel .tv-live { color: #ff8f9b; }             /* 4,1:1 avant, en clignotant — mesuré J444 */
#tv-panel .tv-hour { color: var(--lueur-douce); }
#tv-panel .tv-slide-kicker { border-radius: 0; clip-path: var(--cran4); font-family: var(--pixel); font-weight: 400; }
#tv-panel .tv-slide-portrait { border-radius: 0; border: 0; box-shadow: inset 0 0 0 2px var(--coque-liseré); background: var(--dalle-touche); }
#tv-panel .tv-slide-big { font-family: var(--pixel); font-weight: 400; }
#tv-panel .tv-slide-sub { color: var(--lueur-douce); }
#tv-panel .tv-gauge, #tv-panel .tv-gauge i { border-radius: 0; }
#tv-panel .tv-dot { border-radius: 0; }

/* ---- CONTENANT : la gazette, un journal sur papier ---- */
#gazette-panel {
  border-radius: 0; clip-path: var(--cran);
  border: 10px solid var(--laque);
  background: var(--washi); color: var(--encre);
  box-shadow: inset 0 0 0 2px var(--or);
}
#gazette-panel h2 { font-family: var(--pixel); font-weight: 400; color: var(--encre); border-bottom-color: var(--encre); }
#gazette-panel .empty { color: var(--encre-douce); }
#gazette-panel .ed-title { color: var(--encre-douce); font-family: var(--pixel); font-weight: 400; }
#gazette-panel .brief { border-bottom-color: rgba(43, 33, 24, 0.25); }
#gazette-panel #gazette-close { border-radius: 0; clip-path: var(--cran4); border: 0; background: var(--laque); color: var(--washi); font-family: var(--pixel); }

/* Le coin cranté rogne le contour de focus (revue J441) : il se dessine à l'intérieur. Les boutons
 * dont l'état porte déjà un liseré (onglet actif, caméra choisie, « Message ») sont nommés : plus
 * spécifiques que `button:focus-visible`, ils gardaient leur liseré vert et le focus disparaissait. */
#phone-panel button:focus-visible, #pubcam-panel button:focus-visible, #tv-panel button:focus-visible, #gazette-panel button:focus-visible,
#phone-panel .phone-act.sms:focus-visible, #pubcam-panel .surv-tab.active:focus-visible, #pubcam-panel button.cam-pick.active:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px #ffffff;
}

/* ============================================================================================
 * J445 — DA DES PANNEAUX, LOT 4 : HORS PARTIE.
 *
 * Ce qu'on voit avant et après une partie prend la même main que le jeu : la CRÉATION, les RÈGLES
 * et la FIN DE PARTIE sont des contenants (le cadre laqué, liseré or) ; le SALON D'ATTENTE est un
 * outil posé sur le village (l'ambre) ; l'écran-titre garde son logo pixel, et son bouton devient
 * un sceau vermillon cranté. L'écran de fin interactif (J415) garde la palette de SA maquette,
 * validée par Charly : il n'est pas touché.
 *
 * Le coin cranté rogne toute ombre portée et tout halo (`clip-path` s'applique après `filter` et
 * `box-shadow`) : le bouton-titre ne « respire » plus par son halo, mais par sa couleur.
 * ========================================================================================== */

/* ---- L'écran-titre ---- */
#title-enter {
  border-radius: 0; clip-path: var(--cran);
  border: 0; background: var(--vermillon); color: var(--washi);
  font-family: var(--pixel); font-weight: 400;
  box-shadow: none;
  animation: title-braise 2.4s ease-in-out infinite;
}
@keyframes title-braise { 0%, 100% { background-color: var(--vermillon); } 50% { background-color: var(--vermillon-encre); } }
@media (prefers-reduced-motion: reduce) { #title-enter { animation: none; } }
#title-foot { font-family: var(--pixel); color: #c9b896; }

/* ---- CONTENANT : la création et les règles ---- */
#create-screen, #rules-screen { background: radial-gradient(120% 120% at 50% 0%, #2a1714 0%, #120b0a 70%); }
/* Le liseré est une BORDURE, pas une ombre intérieure : les règles défilent, et une ombre se laisse
 * recouvrir par ce qui défile (leçon J443, revue en capturant ce lot). */
#create-card, #rules-card, #gameover-card {
  border-radius: 0; clip-path: var(--cran);
  border: 3px solid var(--or); background: var(--laque); color: var(--washi);
  box-shadow: none;
}
/* Le titre en dégradé de texte (`background-clip: text`) : on rend au texte sa propre couleur. */
#create-card h1, #rules-card h1 {
  background: none; -webkit-text-fill-color: currentColor;
  color: var(--washi); font-family: var(--pixel); font-weight: 400;
}
#create-card .subtitle, #rules-card p, #rules-card .rules-lead { color: #e3d4b3; }
#create-card .subtitle b, #rules-card b { color: var(--washi); }
#create-card label { font-family: var(--pixel); font-weight: 400; color: #c9b896; }
#create-card select, #room-create-row input {
  border-radius: 0; clip-path: var(--cran4); border: 0;
  background: var(--washi); color: var(--encre);
}
#room-row #room-new, #p1-flip { border-radius: 0; clip-path: var(--cran4); border: 0; background: var(--laque-clair); color: var(--washi); }
#room-create-row button { border-radius: 0; clip-path: var(--cran4); background: var(--ambre); color: var(--ambre-nuit); font-family: var(--pixel); font-weight: 400; }
/* L'aperçu du personnage : une fiche de papier dans le cadre. */
#p1-preview { border-radius: 0; clip-path: var(--cran4); border: 0; background: var(--washi); color: var(--encre); }
#p1-preview .p1-name {
  background: none; -webkit-text-fill-color: currentColor;
  color: var(--vermillon-encre); font-family: var(--pixel); font-weight: 400;
}
#p1-preview .row span:first-child, #p1-preview .p1-note { color: var(--encre-douce); }
#p1-preview .p1-note { border-top-color: rgba(43, 33, 24, 0.25); }
#p1-silhouette { border-radius: 0; border: 2px solid var(--or); }   /* une ombre intérieure passerait SOUS le canevas, qu'il peint en plein */
#create-start, #rules-close {
  border-radius: 0; clip-path: var(--cran);
  background: var(--vermillon); color: var(--washi);
  font-family: var(--pixel); font-weight: 400;
}
#create-start:disabled { opacity: 1; background: #2a2018; color: #a99880; }   /* grisé par la couleur : à 0,6 d'opacité, ~3,5:1 */
.rules-open { border-radius: 0; clip-path: var(--cran); border: 0; background: var(--laque-clair); color: var(--washi); font-family: var(--pixel); font-weight: 400; }
.create-status { color: var(--ambre); }
#rules-card .rules-sec { font-family: var(--pixel); font-weight: 400; color: var(--ambre); }
#rules-card .rules-liens { font-size: var(--fs-xs); }
#rules-card .rules-liens a { color: #f3d39a; }   /* un lien écrit en ligne, bleu, échappait à la feuille (J443) */

/* ---- OUTIL : le salon d'attente ---- */
#lobby {
  border-radius: 0; clip-path: var(--cran);
  border: 0; background: var(--ambre-nuit); color: var(--washi);
  box-shadow: inset 0 0 0 3px var(--ambre);
}
#lobby .lobby-title { font-family: var(--pixel); font-weight: 400; color: var(--ambre); }
#lobby .lobby-count { font-family: var(--pixel); font-weight: 400; color: var(--washi); }
#lobby .lobby-hint, .lobby-settings label { color: #c9b896; }
.lobby-settings label { font-family: var(--pixel); font-weight: 400; }
.lobby-settings select { border-radius: 0; clip-path: var(--cran4); border: 0; background: var(--ambre-cendre); color: var(--washi); }
#lobby-start { border-radius: 0; clip-path: var(--cran); background: var(--ambre); color: var(--ambre-nuit); font-family: var(--pixel); font-weight: 400; }
/* Grisé par sa COULEUR, pas par l'opacité : à 0,5, le texte tombait sous le seuil (mesuré J441 sur le menu ⚡). */
#lobby-start:disabled { opacity: 1; background: #2a2018; color: #a99880; }
/* Les parcours guidés n'avaient AUCUN style : deux boutons blancs du navigateur au milieu du salon. */
#ecole-kira-btn, #ecole-cellule-btn {
  display: block; width: 100%; margin-top: 6px; padding: 9px;
  border: 0; border-radius: 0; clip-path: var(--cran4);
  background: var(--ambre-cendre); color: var(--washi);
  font-size: var(--fs-md); cursor: pointer; touch-action: manipulation;
}
#ecole-kira-btn:hover, #ecole-cellule-btn:hover { background: #4a3826; }
#ecole-kira-btn:active, #ecole-cellule-btn:active { transform: translateY(1px); }
#palmares { border-radius: 0; clip-path: var(--cran4); border: 0; background: var(--ambre-cendre); }
#palmares .pal-title { font-family: var(--pixel); font-weight: 400; color: var(--ambre); }
#palmares .pal-row { color: #c9b896; }
#palmares .pal-stat { color: var(--washi); border-top-color: rgba(232, 163, 61, 0.3); }

/* ---- CONTENANT : la fin de partie (le repli quand l'écran interactif ne se monte pas) ---- */
#gameover-card h2 { font-family: var(--pixel); font-weight: 400; }
#gameover-card.kira h2 { color: #ff6b81; }   /* le #E23B5A d'avant ne tient que 4,1:1 sur la laque */
#gameover-card p { color: #e3d4b3; }
#gameover-card .reveal { color: var(--ambre); }
#gameover-card .go-obj .ko { color: #ee8a55; }
#gameover-card .go-stats, #gameover-card .tl-ev .tl-t { color: #c9b896; }
#gameover-card .go-timeline { border-radius: 0; border: 0; background: rgba(239, 228, 204, 0.06); }
#gameover-card .go-timeline h3 { font-family: var(--pixel); font-weight: 400; color: var(--ambre); }
#replay-btn { border-radius: 0; clip-path: var(--cran); background: var(--ambre); color: var(--ambre-nuit); font-family: var(--pixel); font-weight: 400; }

#title-enter:focus-visible, #create-start:focus-visible, #rules-close:focus-visible, .rules-open:focus-visible, #room-new:focus-visible,
#room-create-row button:focus-visible, #p1-flip:focus-visible, #lobby-start:focus-visible, #ecole-kira-btn:focus-visible,
#ecole-cellule-btn:focus-visible, #replay-btn:focus-visible, .lobby-settings select:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px #ffffff;
}
/* Les champs de papier : le blanc ne se verrait pas sur le washi — l'anneau est à l'encre vermillon. */
#create-card select:focus-visible, #room-create-row input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--vermillon-encre);
}