/* Pleine Lune · la feuille de style.
   Une nuit bleue, une lune pâle, du sang pour les moments de tension. Sombre
   par construction : on joue le soir, dans une pièce éteinte, et un écran
   blanc dévoilerait les rôles à toute la table. */
:root {
  --pl-fond: #0b0e1a;
  --pl-fond-2: #121733;
  --pl-carte: rgba(255, 255, 255, 0.05);
  --pl-carte-2: rgba(255, 255, 255, 0.09);
  --pl-bord: rgba(190, 205, 255, 0.16);
  --pl-texte: #eef1ff;
  --pl-doux: #9aa3c7;
  --pl-lune: #cdd8ff;
  --pl-sang: #ef5460;
  --pl-sang-fond: rgba(239, 84, 96, 0.14);
  --pl-village: #6fd3a1;
  --pl-or: #f2c76e;
  --pl-sur-lune: #0b0e1a;
  --pl-rayon: 16px;
  --pl-ombre: 0 10px 30px rgba(0, 0, 0, 0.35);
  --h-0: 250; --h-1: 200; --h-2: 160; --h-3: 30; --h-4: 340; --h-5: 290; --h-6: 60; --h-7: 10;
}

* { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(120% 70% at 50% -10%, var(--pl-fond-2) 0%, var(--pl-fond) 62%) fixed;
  color: var(--pl-texte);
  font: 16px/1.5 "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Space Grotesk", "Inter Tight", system-ui, sans-serif; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
.entete h1 { font-size: clamp(1.35rem, 6vw, 2rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }

.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico-lg { width: 1.75em; height: 1.75em; }
.ico-xl { width: 3.2em; height: 3.2em; }

.app {
  max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 16px;
}
.sans-js { padding: 24px; text-align: center; }
.chargement { margin: auto; text-align: center; color: var(--pl-lune); display: grid; gap: 12px; justify-items: center; }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.entete { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.entete h1, .entete h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marque { display: flex; align-items: center; }
/* Le logo de l'app, découpé par tools/app_logo.py : une image de fond dans une
   case au rapport d'aspect du PNG (926 × 256). Faux, le dessin flotterait dans
   une case trop large ou trop étroite. L'app n'a que la nuit : c'est toujours
   la variante pour fond sombre (lettrage clair). */
.marque-logo {
  display: block; flex: none; height: 34px; max-width: 100%; aspect-ratio: 926 / 256;
  background: url("brand/logo-dark.png") left center / contain no-repeat;
}
.marque-logo-grand { height: auto; width: min(100%, 320px); margin: 0 auto; background-position: center; }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--pl-bord); background: var(--pl-carte-2); color: var(--pl-texte);
  font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn:focus-visible, .carte-choix:focus-visible, .onglet:focus-visible, input:focus-visible { outline: 2px solid var(--pl-lune); outline-offset: 2px; }
.btn-lune { background: var(--pl-lune); color: var(--pl-sur-lune); border-color: transparent; }
.btn-sang { background: var(--pl-sang); color: #fff; border-color: transparent; }
.btn-doux { background: transparent; }
.btn-large { width: 100%; min-height: 56px; font-size: 1.05rem; }
.btn-icone { width: 48px; padding: 0; flex: none; }
.btn-petit { min-height: 44px; padding: 0 14px; font-size: 0.92rem; }
.rangee { display: flex; gap: 10px; flex-wrap: wrap; }
.rangee > .btn { flex: 1 1 140px; }
.pile { display: grid; gap: 12px; }
.pile > *, .liste > *, .scene > * { min-width: 0; }

/* ── Cartes, formulaires ─────────────────────────────────────────────────── */
.carte { background: var(--pl-carte); border: 1px solid var(--pl-bord); border-radius: var(--pl-rayon); padding: 16px; box-shadow: var(--pl-ombre); }
.carte h2 + p, .carte h3 + p { margin-top: 6px; }
.doux { color: var(--pl-doux); }
.petit { font-size: 0.88rem; }
.champ { display: grid; gap: 6px; }
.champ label { font-size: 0.9rem; color: var(--pl-doux); }
.champ input {
  min-height: 48px; padding: 0 14px; border-radius: 12px; font-size: 16px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--pl-bord); width: 100%;
}
.erreur { color: var(--pl-sang); background: var(--pl-sang-fond); border-radius: 12px; padding: 10px 14px; font-size: 0.94rem; }
.info { color: var(--pl-lune); background: var(--pl-carte); border-radius: 12px; padding: 10px 14px; font-size: 0.94rem; }

/* ── Onglets ─────────────────────────────────────────────────────────────── */
.onglets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; background: var(--pl-carte); border-radius: 999px; border: 1px solid var(--pl-bord); }
.onglet { min-height: 44px; border: 0; background: transparent; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--pl-doux); font-size: 0.78rem; gap: 0; padding: 4px 2px; }
.onglet[aria-selected="true"] { background: var(--pl-lune); color: var(--pl-sur-lune); font-weight: 700; }

/* ── Pastille de joueur ──────────────────────────────────────────────────── */
.pastille {
  --h: var(--h-0);
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font: 700 1rem "Space Grotesk", sans-serif; color: #fff;
  background: linear-gradient(145deg, hsl(var(--h) 70% 55%), hsl(var(--h) 65% 38%));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16);
}
.pastille-lg { width: 56px; height: 56px; font-size: 1.3rem; margin: 0 auto; }
.liste { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ligne { text-align: left; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--pl-carte); border: 1px solid var(--pl-bord); min-height: 56px; }
.ligne .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ligne .sous { display: block; white-space: normal; font-weight: 400; font-size: 0.84rem; color: var(--pl-doux); }
.rang { width: 28px; text-align: center; font: 700 1.05rem "Space Grotesk", sans-serif; color: var(--pl-doux); }
.rang-1 { color: var(--pl-or); }
.score { text-align: right; font: 700 1.2rem "Space Grotesk", sans-serif; }
.score small { display: block; font: 400 0.78rem "Inter Tight", sans-serif; color: var(--pl-doux); }

/* ── Choix d'un joueur (sélecteur) ───────────────────────────────────────── */
.grille-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.carte-choix {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px; text-align: left;
  border-radius: 14px; border: 1px solid var(--pl-bord); background: var(--pl-carte); cursor: pointer; color: var(--pl-texte);
}
.carte-choix[aria-pressed="true"] { border-color: var(--pl-lune); background: rgba(205, 216, 255, 0.16); box-shadow: 0 0 0 1px var(--pl-lune); }
.carte-choix[disabled] { opacity: 0.35; cursor: not-allowed; }
.carte-choix .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.choix-sang[aria-pressed="true"] { border-color: var(--pl-sang); background: var(--pl-sang-fond); box-shadow: 0 0 0 1px var(--pl-sang); }

/* ── La partie ───────────────────────────────────────────────────────────── */
.scene { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; text-align: center; padding: 8px 0; }
.scene .ico-xl { margin: 0 auto; color: var(--pl-lune); }
.scene h1 + p { margin-top: 10px; }
.scene .carte { text-align: left; }
.fiche-role {
  border-radius: 24px; padding: 28px 20px; display: grid; gap: 12px; justify-items: center; text-align: center;
  border: 1px solid var(--pl-bord); background: linear-gradient(160deg, rgba(205, 216, 255, 0.14), rgba(255, 255, 255, 0.03));
}
/* La fiche est la MÊME pour les deux camps (fond, bordure) : un loup qui
   découvre son rôle ne doit pas se voir de l'autre bout de la table. Seule la
   petite étiquette du camp garde sa couleur ; les douze cartes ont été
   commandées avec la même quantité de clair pour la même raison. */
.illus-role { display: block; height: auto; aspect-ratio: 1; border-radius: 18px; background: var(--pl-carte-2); }
.fiche-role .illus-role { width: min(100%, 240px); }
.illus-nuit { width: min(100%, 168px); margin: 0 auto; border-radius: 16px; }
.illus-choix { width: 48px; flex: none; border-radius: 10px; }
/* La scène d'un moment (C1) : toute la largeur de la colonne, plafonnée en
   hauteur pour laisser la place au vote et à la liste sur un petit écran (la
   gravure se recadre alors par le centre). */
.illus-scene { display: block; width: 100%; height: auto; max-height: 38vh; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; background: var(--pl-carte-2); }
.dos-carte { display: block; width: min(100%, 150px); height: auto; aspect-ratio: 2 / 3; margin: 0 auto; border-radius: 14px; background: var(--pl-carte-2); cursor: pointer; box-shadow: var(--pl-ombre); }
.etiquette { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: var(--pl-carte-2); }
.etiquette-loups { color: var(--pl-sang); background: var(--pl-sang-fond); }
.etiquette-village { color: var(--pl-village); background: rgba(111, 211, 161, 0.12); }
.minuteur { font: 700 3rem "Space Grotesk", sans-serif; color: var(--pl-lune); letter-spacing: 0.02em; }
.progression { height: 4px; border-radius: 4px; background: var(--pl-carte-2); overflow: hidden; }
.progression > span { display: block; height: 100%; background: var(--pl-lune); }
.mort { opacity: 0.55; }
.mort .n { text-decoration: line-through; }

.pied-partie { display: flex; gap: 10px; align-items: center; }
.pied-partie .doux { flex: 1; }

/* ── Réglages de la composition ──────────────────────────────────────────── */
.compo { display: grid; gap: 8px; }
.compo-ligne { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.compo-ligne .ico { color: var(--pl-lune); }
.compo-ligne .nom { flex: 1; font-weight: 600; }
.pas { display: inline-flex; align-items: center; gap: 4px; }
.pas output { min-width: 28px; text-align: center; font: 700 1.1rem "Space Grotesk", sans-serif; }
.pas .btn { width: 44px; min-height: 44px; padding: 0; }

.teintes { display: flex; gap: 8px; flex-wrap: wrap; }
.teintes button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.teintes button[aria-pressed="true"] { border-color: var(--pl-texte); }

.bandeau { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100% - 32px); z-index: 10; padding: 10px 16px; border-radius: 999px; background: var(--pl-fond-2); border: 1px solid var(--pl-sang); color: var(--pl-texte); font-size: 0.9rem; box-shadow: var(--pl-ombre); }

@media (prefers-reduced-motion: no-preference) {
  .scene > * { animation: pl-entree 0.35s ease both; }
  .scene > *:nth-child(2) { animation-delay: 0.05s; }
  .scene > *:nth-child(3) { animation-delay: 0.1s; }
  /* La fiche découverte à la distribution se retourne, comme la carte posée. */
  .scene > .fiche-role.retournee { animation: pl-retourne 0.45s ease both; }
}
@keyframes pl-retourne { from { opacity: 0.3; transform: perspective(900px) rotateY(-90deg); } to { opacity: 1; transform: none; } }
@keyframes pl-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.code-ami { font: 700 1.8rem "Space Grotesk", sans-serif; letter-spacing: 0.18em; color: var(--pl-lune); user-select: all; }

/* ── Chacun son téléphone ────────────────────────────────────────────────
   Le narrateur (index.html) : le choix des téléphones à la préparation, la
   liste des liens. Le joueur (joueur.html) : son rôle, ses secrets, son
   action de nuit. Même nuit, mêmes cartes : un écran de joueur ne doit pas
   se distinguer de loin d'un autre (le rôle reste caché par défaut). */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode {
  display: grid; gap: 6px; align-content: start; justify-items: start; min-height: 44px; padding: 12px;
  border-radius: 14px; border: 1px solid var(--pl-bord); background: var(--pl-carte); color: var(--pl-texte);
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mode .ico { color: var(--pl-lune); }
.mode[aria-pressed="true"] { border-color: var(--pl-lune); background: rgba(205, 216, 255, 0.16); box-shadow: 0 0 0 1px var(--pl-lune); }
.mode:focus-visible { outline: 2px solid var(--pl-lune); outline-offset: 2px; }
.mode-texte { display: grid; gap: 2px; min-width: 0; }

.liens .ligne { padding-right: 6px; }
.lien-actions { display: flex; gap: 2px; flex: none; }
.lien-actions .btn-icone { width: 44px; min-height: 44px; }
.lien .sous::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
  vertical-align: 0.05em; background: var(--pl-doux);
}
.lien.is-ouvert .sous::before { background: var(--pl-or); }
.lien.is-vu .sous::before { background: var(--pl-village); }
.qr-carte { text-align: center; justify-items: center; }
.qr-carte .rangee { width: 100%; }
.qr { display: block; width: min(64vw, 240px); height: auto; aspect-ratio: 1; margin: 0 auto; border-radius: 12px; background: #fff; padding: 8px; }
.qr-code { font-size: 1.6rem; }

.page-joueur .entete { justify-content: space-between; }
.joueur-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--pl-lune); }
.bandeau-lien { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 0.94rem; background: var(--pl-carte); border: 1px solid var(--pl-bord); }
.bandeau-lien .ico { color: var(--pl-or); }
.champ-code { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.champ-code::placeholder { letter-spacing: 0.12em; }
.surtitre { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.jeu-joueur h1 + p { margin-top: 8px; }
.attente-lune { display: grid; place-items: center; padding: 24px 0; color: var(--pl-lune); }
.secret-tete { display: flex; align-items: center; gap: 12px; }
.secret-texte { flex: 1; min-width: 0; display: grid; }
.secret-texte strong { font: 700 1.15rem "Space Grotesk", sans-serif; }
.secret-cache { color: var(--pl-doux); letter-spacing: 0.06em; }
.secret-role { display: flex; align-items: center; gap: 12px; }
.ligne.is-moi { border-color: var(--pl-lune); }
/* Le vote : une colonne, l'étiquette des voix au bout de la ligne. */
.grille-voix { grid-template-columns: 1fr; }
.grille-voix .carte-choix .nom { flex: 1; }
.carte-choix .etiquette { flex: none; white-space: nowrap; }