/* ═══ V2 : la nouvelle direction artistique du jeu, en noir, blanc et rouge ═══════════════════════════════════════════════════════════════════
   Chargée APRÈS style.css : elle ne change pas la mise en page, seulement les couleurs et la matière (encre, papier, un seul rouge). Palette = celle du jeu
   (survivors/game/noir.gd) : encre #1a1818, gris foncé #3a3736, gris #8d8985, peau #cdc8be, papier #f4f1ea, rouge #9e121a (le rouge du flacon de vie et des icônes). */
:root {
  --ink: #1a1818;
  --dgray: #3a3736;
  --gray: #8d8985;
  --skin: #cdc8be;
  --paper: #f4f1ea;
  --red: #9e121a;
  --red-hot: #c4121a;
  /* Anciens noms repris par style.css, redéfinis dans la palette. */
  --bg: var(--paper);
  --cream: var(--ink);
  --cream-dim: var(--dgray);
  --edge: var(--ink);
  --panel: var(--ink);
}

body {
  background: var(--paper);
  color: var(--ink);
}

/* ─── Premier écran ─── */
.logo {
  /* Lettres blanches cernées d'un trait d'encre : elles se lisent sur le ciel comme sur les immeubles. */
  filter:
    drop-shadow(2.5px 0 0 var(--ink)) drop-shadow(-2.5px 0 0 var(--ink))
    drop-shadow(0 2.5px 0 var(--ink)) drop-shadow(0 -2.5px 0 var(--ink))
    drop-shadow(1.8px 1.8px 0 var(--ink)) drop-shadow(-1.8px -1.8px 0 var(--ink));
}

.genre {
  color: var(--ink);
  text-shadow: none;
  font-weight: 700;
  /* Un cartouche de papier derrière : la ligne se lit même devant un immeuble. */
  padding: 3px 10px;
  background: var(--paper);
  border: 2px solid var(--ink);
}

.label {
  color: var(--ink);
  text-shadow: none;
}

.field {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--paper);
}
.field::placeholder { color: var(--dgray); }
.field:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 2px var(--paper), inset 0 0 0 1px var(--red);
}

.note { color: var(--ink); text-shadow: none; background: var(--paper); padding: 0 6px; }
.note:empty { padding: 0; }
.note.ok { color: var(--ink); }
.note.ko { color: var(--red); }

.btn {
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  color: var(--paper);
  box-shadow: 0 0 0 2px var(--paper);
}
.btn:hover,
.btn:focus-visible {
  background: var(--red);
  border-color: var(--ink);
  color: var(--paper);
  box-shadow: 0 0 0 2px var(--paper);
}
.btn .state { color: var(--skin); }
.btn.soon { background: var(--dgray); border-color: var(--ink); color: var(--skin); }
.btn.mine:not(.soon) { border-color: var(--red); }

.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.primary:hover,
.primary:focus-visible { background: var(--red); border-color: var(--ink); color: var(--paper); }

.platforms { color: var(--dgray); }
.foot { color: var(--dgray); }
.foot a { color: var(--ink); }

/* Les boutons en haut à droite et le studio. */
.lang,
.discord,
.sound {
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--paper);
}
.lang:hover,
.lang:focus-visible,
.discord:hover,
.discord:focus-visible,
.sound:hover,
.sound:focus-visible {
  background: var(--red);
  border-color: var(--ink);
  color: var(--paper);
}
.studio img { filter: grayscale(1) contrast(1.15) drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink)); }
.down { color: var(--ink); }
.down:hover, .down:focus-visible { color: var(--red); }

/* ─── Les personnages : en encre sur le trottoir clair ─── */
.card {
  background: none;
}
.card:hover,
.card.on,
.card:focus-visible {
  background-image: none;
}
.card img {
  filter:
    drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink))
    drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink));
}
.card:hover img,
.card.on img,
.card:focus-visible img {
  filter:
    drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink))
    drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink))
    drop-shadow(5px 6px 0 rgba(158, 18, 26, 0.85));
}
.card h3 { color: var(--ink); }
.card p {
  color: var(--ink);
  text-shadow: none;
  padding: 6px 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
}
.story .s1 { color: var(--dgray); }
.story .s2 { color: var(--ink); text-shadow: none; }

/* ─── La jauge d'humanité : du gris au rouge ─── */
.arc {
  background: var(--paper);
  border-top: 6px solid var(--ink);
}
.arc-title {
  color: var(--ink);
  background: none;
  filter: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  /* Un trait rouge sous le titre, dessiné comme à la main. */
  border-bottom: 5px solid var(--red);
  padding-bottom: 6px;
}
.arc-intro { color: var(--dgray); }
.arc-bar { background: rgba(26, 24, 24, 0.12); border: 2px solid var(--ink); border-radius: 0; }
.arc-fill {
  border-radius: 0;
  background: linear-gradient(90deg, var(--dgray), var(--gray) 30%, var(--red) 70%, var(--red-hot));
  box-shadow: none;
}
.arc-bar i { background: var(--ink); border-radius: 0; }
.arc-pct { color: var(--red); text-shadow: none; }
.arc-step h3 { color: var(--ink); }
.arc-step p { color: var(--dgray); }

/* ─── Le niveau 1 : les ennemis et les boss, en encre sur papier ─── */
.level {
  background: var(--paper);
  border-top: 6px solid var(--ink);
}
.level-title { color: var(--ink); text-shadow: none; }
.level-name { color: var(--red); text-shadow: none; }
.level-label { color: var(--dgray); }
.foe::before {
  /* Une tache d'encre claire sous l'ennemi (à la place du halo). */
  background: radial-gradient(closest-side, rgba(26, 24, 24, 0.14), rgba(26, 24, 24, 0.05) 60%, rgba(26, 24, 24, 0) 100%);
}
.foe img {
  filter:
    drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink))
    drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink));
}
.foe .n { color: var(--ink); }

.level-signup {
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--skin);
  box-shadow: 8px 8px 0 var(--ink);
}
.level-signup .label { color: var(--ink); text-shadow: none; }
.date { color: var(--ink); text-shadow: none; }
.level-signup .date { color: var(--red); }
.perk { color: var(--ink); }

/* ─── Restes de la v1 : l'avantage des inscrits, les pages légales, les liens du pied de page ─── */
.level-signup .perk { color: var(--red); text-shadow: none; }
.level-signup .primary { box-shadow: 0 0 0 2px var(--paper); }
.level-signup .primary:hover { background: var(--red); }
.legal-back { color: var(--dgray); }
.legal-back:hover { color: var(--red); }
.legal { color: var(--ink); }
.legal h1 { color: var(--ink); }
.legal-lead { color: var(--ink); }
.legal h2 { color: var(--red); }
.legal p, .legal li { color: var(--dgray); }
.legal strong { color: var(--ink); }
.legal a { color: var(--red); }
.legal a:hover { color: var(--ink); }
.legal-updated { color: var(--gray); }
.foot a:hover { color: var(--red); }
.legal-head img {
  filter:
    drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink))
    drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink));
}

/* Lieutenants et boss : au survol, le même éclairage rouge que les personnages (ombre portée rouge) ; les lieutenants sont à bonne distance du boss. */
.foe.boss:hover img {
  filter:
    drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink))
    drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink))
    drop-shadow(7px 9px 0 rgba(158, 18, 26, 0.9));
}
.foe.boss:hover::before {
  background: radial-gradient(closest-side, rgba(158, 18, 26, 0.30), rgba(158, 18, 26, 0.10) 60%, rgba(158, 18, 26, 0) 100%);
}
.foes.bosses.lts { margin-bottom: clamp(72px, 14vh, 150px); }

/* ─── La vie au manoir : les activités du jeu (titres seuls, les phrases sont à écrire par le créateur ; un texte vide ne s'affiche pas) ─── */
.life {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 90px) 24px;
}
.life-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.life-item {
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 7px 0 rgba(158, 18, 26, 0.85);
  padding: 22px 20px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.life-item h3 {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.life-item p { margin: 0; color: var(--ink); }
.life-item p:empty { display: none; }
@media (max-width: 760px) { .life-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .life-grid { grid-template-columns: 1fr; } }