/* Le téléphone du joueur.
   Tenu à une main, dans une pièce sombre, par quelqu'un qui joue et ne veut
   pas quitter la table des yeux longtemps. Peu d'éléments, gros, lisibles.

   Toutes les couleurs passent par des variables : le theme.css d'une campagne
   n'a qu'à redéfinir celles qu'il veut changer. */

:root {
  --fond: #0a0a0c;
  --fond-bloc: #141418;
  --fond-creux: #1e1e24;
  --trait: #2a2a32;
  --texte: #e8e8ea;
  --texte-faible: #8a8a94;
  --accent: #d8a13a;
  /* Les états — le voyant de liaison, et le rouge des composants. Le thème
     les annonçait déjà comme réglables ; le téléphone les écrivait en dur. */
  --ok: #4a8f63;
  --ko: #c0392b;
  --rayon: 12px;
  /* La police, une seule fois : les boutons et le champ de réponse la
     reprennent par `font: … var(--police)`. `font: … inherit` est rejeté en
     bloc par les navigateurs — voir la note complète dans mj/style.css. */
  --police: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* TOUT CE QUI SE TOUCHE — les cartes de personnage, les boutons, le retour à
   l'appui et l'anneau de focus — est dans /composants.css, partagé avec le
   pupitre et rangé par RÔLE. Ce fichier ne garde que les jetons et la mise en
   page du téléphone. */

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.45 var(--police);
}

section { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }

h1 {
  margin: 24px 0 20px;
  font-size: 24px; font-weight: 400; letter-spacing: .04em;
  color: var(--accent);
}
.note { color: var(--texte-faible); font-size: 13px; }
.vide { color: var(--texte-faible); font-size: 14px; text-align: center; padding: 30px 0; }

ul { list-style: none; margin: 0; padding: 0; }

/* ─── choix du personnage ───────────────────────────────────────────── */

/* Chaque personnage est une `.carte`. Reste ici sa hauteur, son titre, et le
   filet à SA couleur : phone.js pose `--accent` sur la carte elle-même. */
#roster li { margin-bottom: 10px; }
#roster .carte { --carte-titre: 19px; min-height: 76px; border-left: 4px solid var(--accent); }

#test-signal { margin-top: 26px; }

/* ─── en-têtes ──────────────────────────────────────────────────────── */

header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--trait);
  font-size: 17px;
}
header span:not(.lien) { flex: 1; }
.lien { width: 8px; height: 8px; border-radius: 50%; background: var(--ko); opacity: .6; flex: none; }
.lien.ok { background: var(--ok); opacity: 1; }

/* ─── la conversation ───────────────────────────────────────────────── */

#messages { padding-bottom: 80px; }
#messages li { margin-bottom: 14px; max-width: 84%; }
#messages time { display: block; margin-bottom: 3px; font-size: 11px; color: var(--texte-faible); }
#messages p {
  margin: 0; padding: 11px 14px;
  border-radius: var(--rayon);
  white-space: pre-wrap; word-break: break-word;
}
#messages p:empty { display: none; }

#messages .moi { margin-left: auto; }
#messages .moi p { background: var(--fond-creux); border: 1px solid var(--trait); }
#messages .moi time { text-align: right; }

/* Le meneur : pleine largeur, pas de bulle, un filet. Ce n'est pas quelqu'un
   qui écrit au personnage, c'est le MJ qui parle au joueur — et ça se voit.
   La forme porte la distinction ; la COULEUR NON. Ce texte est la seule raison
   d'être de ce téléphone — le secret du début, la perception privée — et il
   était rendu dans le ton le plus effacé de l'écran, plus discret que les
   réponses du joueur lui-même. Le filet et l'italique suffisent à dire qui
   parle. */
#messages .mj { max-width: 100%; }
#messages .mj p {
  background: transparent; border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0; padding: 4px 0 4px 14px;
  color: var(--texte); font-style: italic;
}

#messages img {
  display: block; margin-top: 8px;
  max-width: 100%; border-radius: var(--rayon); border: 1px solid var(--trait);
}

#repondre {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--fond); border-top: 1px solid var(--trait);
}
#repondre input {
  flex: 1; min-width: 0; padding: 13px;
  background: var(--fond-creux); color: var(--texte);
  border: 1px solid var(--trait); border-radius: var(--rayon);
  font: 16px/1 var(--police); /* 16 px : en dessous, iOS zoome au focus */
}
#repondre .bouton { flex: none; }

/* Les deux boutons de l'en-tête — « Ma fiche », un `.bouton.discret.compact`,
   et « ⇄ », un `.bouton-icone` — ne sont pas des gestes de jeu : discrets,
   mais à 44 px au moins. Ils faisaient 33 px, à 10 px l'un de l'autre dans
   une pièce sombre, et « ⇄ » renvoie à l'écran de choix. */
header .bouton, header .bouton-icone { flex: none; }

/* ─── le flash ──────────────────────────────────────────────────────── */

#flash {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#flash.on { opacity: .82; }
#flash span {
  color: #000; font-size: 26px; font-weight: 600; letter-spacing: .04em;
}

/* Pour qui demande moins de mouvement, le signal reste et l'éblouissement
   part : un bandeau en haut, sans fondu, au lieu d'un plein écran ambre à
   82 % répété jusqu'à trois fois par message. Ce qui compte est « regarde »,
   pas la surface. Le son et la vibration ne changent pas. */
@media (prefers-reduced-motion: reduce) {
  #flash {
    inset: 0 0 auto 0;
    padding: calc(14px + env(safe-area-inset-top)) 14px 14px;
    transition: none;
  }
  #flash.on { opacity: 1; }
  #flash span { font-size: 18px; }
}