/* ============================================================
   Undercover - feuille de style.

   L'ecran sert pendant qu'on parle en vocal : il doit se lire d'un
   coup d'oeil, sur telephone comme sur un deuxieme ecran. D'ou des
   contrastes francs, peu de couleurs, et une seule information
   dominante par ecran (ton mot, ou a qui de parler, ou le vote).
   ============================================================ */

:root {
  --fond: #0e1014;
  --surface: #161920;
  --surface-haute: #1d212a;
  --bord: #272c37;
  --bord-clair: #39404e;
  --texte: #e7e9ee;
  --discret: #8b93a1;
  --accent: #d4a15a;
  --accent-sombre: #8a6529;
  --civil: #5fb08a;
  --undercover: #d2685c;
  --mrwhite: #b9c2d4;
  --danger: #d2685c;

  --rayon: 12px;
  --rayon-petit: 8px;
  --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 16px calc(32px + env(safe-area-inset-bottom));
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ecran { max-width: 720px; margin: 0 auto; }
.ecran.centre { padding-top: 40px; }
[hidden] { display: none !important; }

/* -- Titres ------------------------------------------------- */
h1 {
  margin: 0;
  font-size: clamp(2.1rem, 8vw, 3rem);
  letter-spacing: -.02em;
  font-weight: 650;
}
h2 {
  margin: 0 0 12px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--discret);
}
.titre-accueil { text-align: center; margin-bottom: 28px; }
.surtitre {
  margin: 0 0 6px;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.sous-titre { color: var(--discret); margin: 12px 0 0; font-size: .95rem; }

/* -- Cartes ------------------------------------------------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 18px;
  margin-bottom: 14px;
}
.carte > summary {
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--discret);
  list-style: none;
}
.carte > summary::-webkit-details-marker { display: none; }
.carte > summary::before { content: "▸ "; color: var(--accent); }
.carte[open] > summary::before { content: "▾ "; }

.aide { color: var(--discret); font-size: .9rem; margin: 0 0 12px; }
.discret { color: var(--discret); font-weight: 400; }
.source { color: var(--discret); font-size: .82rem; font-style: italic; }

/* -- Formulaires -------------------------------------------- */
label {
  display: block;
  margin: 14px 0 6px;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--discret);
}
input[type="text"], input[type="number"], input:not([type]) {
  width: 100%;
  padding: 11px 12px;
  background: var(--fond);
  border: 1px solid var(--bord-clair);
  border-radius: var(--rayon-petit);
  color: var(--texte);
  font-size: 1rem;
  font-family: inherit;
}
input:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input.code {
  font-size: 1.9rem;
  letter-spacing: .45em;
  text-align: center;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  padding-left: .45em;
}
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grille-champs > div > label { margin-top: 12px; }
.case {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  color: var(--texte);
  font-size: .92rem;
  cursor: pointer;
}
.case input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
fieldset {
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit);
  padding: 4px 14px 16px;
  margin: 20px 0 0;
}
legend {
  padding: 0 8px;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--discret);
}
.paire-cachee {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--accent-sombre);
  border-radius: var(--rayon-petit);
  background: rgba(212, 161, 90, .06);
  font-size: .92rem;
}
.paire-cachee p { margin: 0; }

/* -- Boutons ------------------------------------------------ */
.bouton {
  display: inline-block;
  width: 100%;
  margin-top: 16px;
  padding: 12px 18px;
  background: var(--surface-haute);
  border: 1px solid var(--bord-clair);
  border-radius: var(--rayon-petit);
  color: var(--texte);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.bouton:hover:not(:disabled) { background: #242935; border-color: #4a5262; }
.bouton:active:not(:disabled) { transform: translateY(1px); }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.bouton.principal {
  background: var(--accent);
  border-color: var(--accent);
  color: #17130a;
  font-weight: 650;
}
.bouton.principal:hover:not(:disabled) { background: #e0b06c; border-color: #e0b06c; }
.bouton.mini {
  width: auto;
  margin: 0;
  padding: 5px 10px;
  font-size: .78rem;
  font-weight: 500;
}
.bouton.discret-bouton { background: transparent; color: var(--discret); }
.ligne-boutons { display: flex; gap: 10px; flex-wrap: wrap; }
.ligne-boutons .bouton { flex: 1 1 180px; width: auto; }

/* -- Bulles d'aide ------------------------------------------
   Un `title=` natif ne s'affiche pas au doigt : la bulle est donc un
   vrai bouton, ouvert au clic comme au survol, et refermable. */
.bulle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  margin-left: 5px;
  padding: 0;
  vertical-align: -2px;
  background: transparent;
  border: 1px solid var(--bord-clair);
  border-radius: 50%;
  color: var(--discret);
  font: 600 11px/1 system-ui, sans-serif;
  cursor: help;
}
.bulle:hover, .bulle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}
.bulle-texte {
  position: absolute;
  z-index: 30;
  max-width: min(80vw, 320px);
  margin-top: 6px;
  padding: 11px 13px;
  background: #0b0d11;
  border: 1px solid var(--accent-sombre);
  border-radius: var(--rayon-petit);
  box-shadow: var(--ombre);
  color: var(--texte);
  font-size: .87rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
}

/* Rappel de règle sous le bloc d'action, toujours visible. */
.rappel-regle {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--accent-sombre);
  background: rgba(212, 161, 90, .05);
  color: var(--discret);
  font-size: .86rem;
}

/* -- Banque de mots ----------------------------------------- */
.banque { margin-top: 16px; }
.banque > summary {
  cursor: pointer;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--discret);
}
.banque-liste { list-style: none; margin: 10px 0 0; padding: 0; font-size: .89rem; }
.banque-liste li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--bord);
}
.banque-liste li:last-child { border-bottom: 0; }
.banque-paire { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.banque-vues { color: var(--discret); font-size: .78rem; font-variant-numeric: tabular-nums; }
.banque-vide { color: var(--discret); font-style: italic; }

/* -- Bandeau de message ------------------------------------- */
.bandeau {
  position: fixed;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 20;
  max-width: min(92vw, 560px);
  padding: 11px 16px;
  background: var(--surface-haute);
  border: 1px solid var(--undercover);
  border-radius: var(--rayon-petit);
  box-shadow: var(--ombre);
  font-size: .93rem;
}
.bandeau.info { border-color: var(--accent); }

/* -- En-tete de partie -------------------------------------- */
.entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 0 14px;
  flex-wrap: wrap;
}
.entete-gauche, .entete-droite { display: flex; align-items: center; gap: 10px; }
.pastille-code {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.phase { font-size: .82rem; color: var(--discret); }
.connexion {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--civil);
  flex: none;
}
.connexion.perdue { background: var(--undercover); }

/* -- Bloc role ---------------------------------------------- */
.carte.role { text-align: center; padding: 26px 18px; }
.role-cache p { color: var(--discret); margin: 0; }
.role-etiquette {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--discret);
}
.role-mot {
  margin: 10px 0 8px;
  font-size: clamp(2rem, 9vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.role-consigne { margin: 0; color: var(--discret); font-size: .92rem; }
.carte.role.est-civil { border-color: rgba(95, 176, 138, .45); }
.carte.role.est-civil .role-etiquette { color: var(--civil); }
.carte.role.est-undercover { border-color: rgba(210, 104, 92, .45); }
.carte.role.est-undercover .role-etiquette { color: var(--undercover); }
.carte.role.est-mrwhite { border-color: rgba(185, 194, 212, .4); }
.carte.role.est-mrwhite .role-etiquette { color: var(--mrwhite); }
.carte.role.est-mrwhite .role-mot { color: var(--mrwhite); font-style: italic; }

/* -- Bloc action -------------------------------------------- */
.carte.action { border-color: var(--accent-sombre); background: var(--surface-haute); }
.action-titre { margin: 0 0 12px; font-size: 1.05rem; font-weight: 600; }
.action-titre .cible { color: var(--accent); }
.attente { color: var(--discret); margin: 0; }

/* -- Liste des joueurs -------------------------------------- */
.joueurs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.joueur {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-haute);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit);
}
.joueur.parle { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-sombre); }
.joueur.sorti { opacity: .5; }
.joueur.sorti .joueur-nom { text-decoration: line-through; }
.joueur-nom { font-weight: 550; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.joueur-etat { font-size: .78rem; color: var(--discret); white-space: nowrap; }
.puce {
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--bord-clair);
  color: var(--discret);
  white-space: nowrap;
}
.puce.mj { color: var(--accent); border-color: var(--accent-sombre); }
.puce.civil { color: var(--civil); border-color: rgba(95, 176, 138, .5); }
.puce.undercover { color: var(--undercover); border-color: rgba(210, 104, 92, .5); }
.puce.mrwhite { color: var(--mrwhite); border-color: rgba(185, 194, 212, .45); }
.puce.vote { color: var(--accent); border-color: var(--accent-sombre); }
.point-connexion {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--civil); flex: none;
}
.point-connexion.absent { background: var(--bord-clair); }

/* Boutons de vote */
.grille-vote { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.grille-vote .bouton { margin: 0; width: 100%; }
.grille-vote .bouton.choisi { border-color: var(--accent); background: rgba(212, 161, 90, .14); }

/* -- Tableau de suivi --------------------------------------- */
.table-defilante { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table.suivi { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.suivi th, table.suivi td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--bord);
  vertical-align: top;
}
table.suivi thead th {
  position: sticky; top: 0;
  background: var(--surface);
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--discret);
  font-weight: 600;
  white-space: nowrap;
}
table.suivi tbody th {
  font-weight: 550;
  white-space: nowrap;
  color: var(--texte);
}
table.suivi tbody th.sorti { color: var(--discret); text-decoration: line-through; }
table.suivi td { color: var(--texte); min-width: 92px; }
table.suivi td.vide { color: var(--bord-clair); }

/* -- Resultat ----------------------------------------------- */
.carte.resultat { text-align: center; border-color: var(--accent-sombre); }
.resultat-camp {
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.01em;
}
.resultat-motif { margin: 0 0 18px; color: var(--discret); }
.mots-reveles {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 18px;
}
.mot-revele {
  padding: 10px 16px;
  border: 1px solid var(--bord-clair);
  border-radius: var(--rayon-petit);
  background: var(--surface-haute);
}
.mot-revele span {
  display: block;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--discret);
  margin-bottom: 3px;
}
.mot-revele strong { font-size: 1.15rem; }
.scores { list-style: none; margin: 0 0 4px; padding: 0; text-align: left; }
.scores li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--bord);
}
.scores li:last-child { border-bottom: 0; }
.scores .gagnant { color: var(--accent); font-weight: 600; }
.score-points { font-variant-numeric: tabular-nums; color: var(--discret); }

/* -- Journal ------------------------------------------------ */
.journal { list-style: none; margin: 14px 0 0; padding: 0; font-size: .88rem; }
.journal li {
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--bord);
  color: var(--discret);
}
.journal li:last-child { color: var(--texte); border-left-color: var(--accent-sombre); }

.pied { padding: 8px 0 0; }
.pied .bouton { margin-top: 0; }

/* -- Regles ------------------------------------------------- */
.regles-corps { margin-top: 14px; font-size: .93rem; color: var(--texte); }
.regles-corps p { margin: 0 0 12px; }

/* -- Ecrans etroits ----------------------------------------- */
@media (max-width: 520px) {
  .grille-champs { grid-template-columns: 1fr; }
  .entete { padding-top: 12px; }
}

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