:root {
  --bg: #120d07;
  --bg-2: #1b140b;
  --panel: #20180d;
  --line: #4a3618;
  --amber: #ffb43b;
  --amber-dim: #c98a2a;
  --text: #f1d9a8;
  --muted: #9b8460;
  --npc: #ffd27a;
  --player: #8fd3c3;
  --good: #9ccf62;
  --bad: #ff6a4a;
  --check: #c9a3ff;
  --thought: #d8b98a;
  --paper: #e9dcbf;
  --ink: #2c2216;
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --radius: 4px;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'VT323', 'IBM Plex Mono', monospace;
  /* Les zones sûres de l'application installée : la barre d'état en haut, le trait d'accueil en bas,
     l'encoche sur les côtés (iPhone en paysage). */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
/* iPad, application installée : la barre d'état (24 px) passe par-dessus la page, mais en paysage
   iPadOS ne la compte pas toujours dans la zone sûre (le haut de la barre du jeu passait dessous).
   On la réserve quoi qu'il dise. Ni l'iPhone en paysage (pas de barre d'état), ni Android (elle ne
   recouvre pas la page) ne sont concernés. */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) and (min-width: 600px) and (min-height: 600px) {
    :root { --safe-top: max(env(safe-area-inset-top, 0px), 24px); }
  }
}
/* Le haut des bandeaux (barre du jeu, conversation, carnet, le monde) : sous la barre d'état, un peu
   d'air, la moitié de sa hauteur et 12 px au plus (iPad : 24 + 12). Rien de plus sur iPhone : sa zone
   sûre (47 px et plus) contient déjà le sien. Sans barre d'état, 0 : chaque bandeau garde sa marge. */
:root { --top-gap: max(var(--safe-top), min(var(--safe-top) * 1.5, var(--safe-top) + 12px, 44px)); }

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Une application, pas une page : un double toucher ne zoome pas (le pincement non plus, voir app.js). */
html, body { touch-action: manipulation; }
/* Le texte du jeu ne se sélectionne pas, donc ne se copie pas (ni loupe ni menu au toucher long sur iPhone).
   Restent sélectionnables : les champs de saisie et le code de synchronisation, qu'il faut pouvoir copier. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 50% 0%, #2a1d0c 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font: 15px/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

/* Lignes de balayage CRT, très discrètes */
.crt {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.16) 2px 3px);
  mix-blend-mode: multiply;
}

button, input, textarea { font: inherit; color: inherit; }

.btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--amber);
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover:not(:disabled) { background: rgba(255, 180, 59, 0.08); border-color: var(--amber-dim); }
.btn:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.btn:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.6; }
.btn.primary { background: var(--amber); color: var(--bg); border-color: var(--amber); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: #ffc766; }
.btn.small { padding: 4px 10px; font-size: 13px; white-space: nowrap; }

/* ─── Écran titre ───────────────────────────────────────────── */
.start { position: relative; max-width: 860px; margin: 0 auto; padding: 48px 16px 64px; }
.logo {
  font: 400 clamp(64px, 14vw, 128px)/0.9 var(--display);
  color: var(--amber);
  letter-spacing: 0.06em;
  margin: 0;
  text-shadow: 0 0 18px rgba(255, 180, 59, 0.35);
}
.tagline { color: var(--muted); margin: 8px 0 32px; }
/* L'horizon animé (accueil.js), derrière tout le reste de l'accueil. */
.horizon { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; transition: opacity 0.35s ease; }
/* Sous un panneau (options, parties, création du personnage), l'horizon s'efface : le texte d'abord. */
.start[data-panel]:not([data-panel='menu']) .horizon { opacity: 0.1; }

.new-game { display: grid; gap: 24px; }
.field { display: grid; gap: 6px; max-width: 360px; }
.field span, legend { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
input, textarea {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}
fieldset { border: 0; padding: 0; margin: 0; }
legend { margin-bottom: 8px; }
.archetype-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.archetype {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.archetype input { position: absolute; opacity: 0; }
/* L'illustration de l'origine : visage caché, c'est toi. Teintée aux couleurs du jeu. */
.archetype-img { width: calc(100% + 28px); margin: -14px -14px 4px; height: 180px; object-fit: cover; object-position: 50% 25%; border-bottom: 1px solid var(--line); filter: sepia(0.35) saturate(0.85) contrast(1.05); border-radius: var(--radius) var(--radius) 0 0; }
.archetype:has(input:checked) { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.archetype:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }
.archetype h3 { margin: 0; font: 400 28px/1 var(--display); color: var(--amber); }
.archetype p { margin: 0; font-size: 13px; color: var(--text); }
/* Le pied de la carte : la façon de faire et les chiffres, en retrait derrière l'histoire. */
.archetype-foot { display: grid; gap: 4px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.archetype .pitch { font-size: 12px; color: var(--muted); font-style: italic; }
.archetype .mini-stats { font-size: 11px; color: var(--muted); opacity: 0.85; }
.start-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.history { margin-top: 8px; }
.endings { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.endings li { padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 13px; }
.endings .found { color: var(--amber); border-color: var(--amber-dim); }
.endings .locked { color: var(--muted); }
.games { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.games li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.games small { color: var(--muted); }
.game-status { color: var(--muted); }
.game-status.ended { color: var(--amber); }
.game-date { color: var(--muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 860px) {
  .games li { grid-template-columns: 1fr auto; }
  .game-date { display: none; }
}

/* ─── Jeu ───────────────────────────────────────────────────── */
.game { height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  /* En plein écran (application installée), la barre d'état du téléphone passe par-dessus. */
  padding: max(10px, var(--top-gap)) max(16px, var(--safe-right)) 10px max(16px, var(--safe-left));
  border-bottom: 1px solid var(--line);
  background: rgba(18, 13, 7, 0.85);
}
.brand { font: 400 28px/1 var(--display); color: var(--amber); letter-spacing: 0.06em; }
.scene-title { color: var(--muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-toggle { display: none; }

.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.story { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.log { flex: 1; overflow-y: auto; padding: 24px clamp(16px, 4vw, 48px) 12px max(clamp(16px, 4vw, 48px), var(--safe-left)); }
.log > * { max-width: 72ch; }

.entry { margin: 0 0 12px; }
.entry.scene { margin: 28px 0 16px; }
.entry.scene:first-child { margin-top: 0; }
.entry.scene h2 {
  font: 400 30px/1 var(--display);
  color: var(--amber);
  margin: 0 0 10px;
  letter-spacing: 0.04em;
}
.entry.scene h2::before { content: '▌ '; color: var(--amber-dim); }
/* Une fin d'acte : un chapitre qui se ferme. Un trait, le surtitre, le titre en grand. */
.entry.scene.act-end { margin: 36px 0 22px; padding-top: 26px; border-top: 1px solid var(--line); }
.entry.scene.act-end:first-child { margin-top: 8px; }
.entry.scene.act-end .act-eyebrow { margin: 0 0 8px; font: 500 13px/1.2 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber-dim); }
.entry.scene.act-end h2 { font-size: 46px; line-height: 0.95; margin-bottom: 18px; text-wrap: balance; }
.entry.scene.act-end h2::before { content: none; }
/* Un retour à la ligne seul dans le texte d'un lieu est une liste (les routes de la carte, une par ligne). */
.entry.scene p { margin: 0 0 10px; white-space: pre-line; }
.entry.narration { color: var(--text); }
.entry.player { color: var(--player); padding-left: 14px; border-left: 2px solid rgba(143, 211, 195, 0.4); }
.entry.npc { color: var(--npc); padding-left: 14px; border-left: 2px solid rgba(255, 210, 122, 0.45); }
.who { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; }
.tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding: 0 6px; border: 1px solid currentColor; border-radius: 3px; margin-left: 6px; }
/* Un test : le dé, ce qu'on tente et son issue en couleur, puis le détail du jet. */
.entry.check { display: flex; gap: 8px; align-items: flex-start; color: var(--check); font-size: 13px; }
.entry.check svg { width: 15px; height: 15px; flex: none; margin-top: 0.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.entry.check p { margin: 0; }
.entry.check .check-title { font-weight: 600; }
.entry.check.ok .check-title { color: var(--good); }
.entry.check.rate .check-title { color: var(--bad); }
.entry.check .check-detail { color: var(--muted); }
/* Un jet chiffré : un d20 posé sur sa face, et l'issue à côté (la trace du jet, une fois qu'il a roulé
   en plein écran : .de-plein). */
.entry.check.roll { align-items: center; gap: 12px; margin: 12px 0 16px; font-size: 14px; }
.entry.check.roll .die { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; color: var(--check); }
.entry.check.roll .die svg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; stroke-width: 1.3; opacity: 0.85; }
.entry.check.roll .die-n { position: relative; top: 5px; font: 400 20px/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.entry.check.roll.ok .die { color: var(--good); }
.entry.check.roll.rate .die { color: var(--bad); }
.entry.check.roll.crit .die { color: var(--amber); }
.entry.check.roll.crit .die-n { color: var(--amber); }
/* Le dé roule : les choix attendent son issue. */
.dock.awaiting > * { visibility: hidden; pointer-events: none; }
.entry.system { color: var(--muted); font-size: 13px; font-style: italic; }
/* La phrase du chemin, en exergue au-dessus du lieu où l'on arrive. */
.entry.trajet { margin: 0 0 14px; color: var(--muted); font-size: 14px; font-style: italic; }
.entry.trajet + .entry.scene { margin-top: 0; }
.entry.gain, .entry.loss { font-size: 13px; margin-bottom: 4px; }
.entry.gain + .entry.system, .entry.loss + .entry.system { margin-top: 12px; }
.entry.gain { color: var(--good); }
.entry.loss { color: var(--bad); }

/* En chemin : la page se retire, le nom du lieu où l'on va, ce qu'on voit en marchant ; puis la page neuve. */
.log.en-route > * { opacity: 0; transition: opacity 0.3s ease; }
.log.arrivee { animation: trajet-arrivee 0.45s ease-out; }
@keyframes trajet-arrivee { from { opacity: 0; } }
.trajet-voile {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  /* Opaque : on a quitté le lieu, on n'est pas encore arrivé. */
  background: radial-gradient(ellipse at 50% 40%, #2a1d0c 0%, var(--bg) 62%), var(--bg);
  cursor: pointer;
  animation: trajet-entre 0.3s ease-out both;
}
.trajet-voile.parti { animation: trajet-sort 0.28s ease-in both; }
@keyframes trajet-entre { from { opacity: 0; } }
@keyframes trajet-sort { to { opacity: 0; } }
.trajet-carte { width: min(44ch, 100%); text-align: center; }
.trajet-titre { margin: 0 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.18em; }
.trajet-lieu { margin: 0 0 16px; font: 400 40px/1 var(--display); color: var(--amber); letter-spacing: 0.04em; }
.trajet-ligne { margin: 0 0 20px; min-height: 3.2em; color: var(--text); font-style: italic; opacity: 0; transition: opacity 0.5s ease; text-wrap: pretty; }
.trajet-ligne:not(:empty) { opacity: 1; }
.trajet-pas { width: 120px; height: 2px; margin: 0 auto; background: var(--line); overflow: hidden; }
.trajet-pas span { display: block; height: 100%; background: var(--amber-dim); transform: scaleX(0); transform-origin: left; transition: transform var(--marche, 0s) linear; }
.trajet-voile.marche .trajet-pas span { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .log.en-route > *, .trajet-ligne { transition: none; }
  .trajet-voile, .trajet-voile.parti { animation: none; }
  .trajet-pas { visibility: hidden; }
}

/* En bas, le trait d'accueil de l'iPad ne recouvre pas la dernière réplique. */
.dock { border-top: 1px solid var(--line); background: var(--bg-2); padding: 14px clamp(16px, 4vw, 48px) calc(18px + var(--safe-bottom)) max(clamp(16px, 4vw, 48px), var(--safe-left)); max-height: 50%; overflow-y: auto; }
.dock-title { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.choices { display: grid; gap: 6px; max-width: 72ch; }
.choice { display: flex; gap: 10px; align-items: baseline; width: 100%; text-wrap: pretty; } /* pas de mot seul sur la dernière ligne, là où le navigateur sait faire */
.choice .num { color: var(--amber-dim); min-width: 1.4em; }
.choice .stat { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.choice .why { display: block; font-size: 12px; color: var(--muted); }
.choice .check { color: var(--npc); white-space: nowrap; }
/* Le plan de la zone : des pastilles, toujours dans le même ordre ; celle où l'on est, en ambre. */
.plan, .people { margin-bottom: 14px; max-width: 72ch; }
.plan-places, .people-list { display: flex; flex-wrap: wrap; gap: 6px; }
.place { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(32, 24, 13, 0.6); color: var(--amber); font-size: 13px; cursor: pointer; }
.place:hover:not(:disabled) { border-color: var(--amber-dim); background: rgba(255, 180, 59, 0.08); }
.place:disabled { opacity: 0.5; cursor: default; }
.place.here { background: var(--amber); border-color: var(--amber); color: var(--bg); font-weight: 600; cursor: default; }
.place.far { color: var(--muted); border-style: dashed; background: transparent; cursor: default; }
.place.map svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Les gens d'ici : visage et nom ; on leur parle d'un toucher. */
.person { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 14px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(32, 24, 13, 0.6); color: var(--npc); font-size: 14px; cursor: pointer; }
.person:hover:not(:disabled) { border-color: var(--amber-dim); }
.person:disabled { opacity: 0.5; cursor: default; }
.person img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 28%; filter: sepia(0.25); }
/* Réplique déjà dite, dont on n'a pas épuisé les suites ; « Parler d'autre chose » remonte d'un cran. */
.choice.revisit, .choice.back { color: var(--muted); }
.choice.back { font-style: italic; }
.key-mark { color: var(--amber); }
/* Un seuil d'attribut : « [Force 7] ». Franchi, il brille ; sinon, un cadenas, et l'option grisée dit ce qu'il aurait fallu. */
.gate { white-space: nowrap; color: var(--muted); }
.gate.ok { color: var(--good); }
.gate svg { width: 13px; height: 13px; margin-right: 3px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.choice.locked { opacity: 0.6; }

/* La réponse qui s'écrit : trois points, puis la parole. Les répliques attendent la fin. */
/* Une longue réplique en plusieurs morceaux, chacun arrivé après ses points. */
.entry.npc .part { display: block; }
.entry.npc .part + .part { margin-top: 0.45em; }
.entry.typing .dots { display: inline-flex; gap: 6px; align-items: center; height: 1em; vertical-align: middle; }
.entry.typing .dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.25; animation: typing-dot 1.2s ease-in-out infinite; }
.entry.typing .dots i:nth-child(2) { animation-delay: 0.15s; }
.entry.typing .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot { 0%, 70%, 100% { opacity: 0.25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .entry.typing .dots i { animation: none; opacity: 0.6; } }
.talk-dock.awaiting > * { visibility: hidden; pointer-events: none; }

.portrait { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; image-rendering: pixelated; animation: breathe 7s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes breathe { 50% { transform: scale(1.015); } }
@media (prefers-reduced-motion: reduce) { .portrait { animation: none; } }
.npc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.npc-name { font: 400 26px/1 var(--display); color: var(--npc); }
.npc-role { color: var(--muted); font-size: 13px; }
.npc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.mood { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.mood-bar { position: relative; width: 80px; height: 6px; background: var(--line); border-radius: 3px; }
.mood-bar::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--muted); }
.mood-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; }

.enemy { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--bad); }
.pip { width: 14px; height: 14px; border: 1px solid var(--bad); border-radius: 2px; }
.pip.full { background: var(--bad); }

.ending { max-width: 72ch; }
.ending h2 { font: 400 40px/1 var(--display); color: var(--amber); margin: 0 0 8px; }

/* ─── Fiche ─────────────────────────────────────────────────── */
.sheet { overflow-y: auto; padding: 20px max(16px, var(--safe-right)) calc(32px + var(--safe-bottom)) 16px; background: rgba(27, 20, 11, 0.6); }
.sheet section { margin-bottom: 22px; }
.sheet h3 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 8px; font-weight: 400; }
.pc-name { font: 400 30px/1 var(--display); color: var(--amber); margin: 0; }
.pc-arch { color: var(--muted); font-size: 13px; }
.bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 4px 0 2px; }
.bar > div { height: 100%; background: var(--good); transition: width 0.3s; }
.bar.low > div { background: var(--bad); }
.kv { display: flex; justify-content: space-between; font-size: 14px; }
.kv b { color: var(--amber); font-weight: 600; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.list li small { display: block; color: var(--muted); }
.item { display: flex; justify-content: space-between; gap: 8px; align-items: start; flex-wrap: wrap; }
/* Ce que le joueur a noté d'une quête ou d'une personne : replié, d'une écriture de carnet. */
.notes { flex-basis: 100%; margin-top: 2px; }
.notes summary { cursor: pointer; color: var(--muted); font-size: 12px; list-style: none; }
.notes summary::before { content: '+ '; }
.notes[open] summary::before { content: '− '; }
.notes p { margin: 6px 0 0; font-family: var(--hand); font-size: 17px; line-height: 1.35; color: var(--amber-dim); }
.quest.done { opacity: 0.6; text-decoration: line-through; }
.empty { color: var(--muted); font-size: 13px; font-style: italic; }
.gourde { display: flex; gap: 4px; margin: 4px 0 8px; }
.gourde span { width: 14px; height: 18px; border: 1px solid var(--player); border-radius: 2px 2px 5px 5px; }
.gourde span.full { background: rgba(143, 211, 195, 0.55); }
.kv b.low { color: var(--bad); }
.sheet .rule { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.test-badge { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--amber-dim); border-radius: 3px; color: var(--amber); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.route-field { display: flex; gap: 10px; align-items: baseline; margin: -8px 0 0; color: var(--muted); font-size: 14px; cursor: pointer; }
.route-field input { accent-color: var(--amber); }
.route-field b { color: var(--text); font-weight: 600; }
.safe-field { display: flex; gap: 10px; align-items: baseline; margin: 4px 0 16px; padding: 10px 12px; border: 1px dashed var(--amber-dim); border-radius: var(--radius); color: var(--muted); font-size: 14px; }
.safe-field[hidden] { display: none; }
.safe-field b { color: var(--amber); }
.trait-desc { font-style: italic; }
.origin summary { cursor: pointer; font-size: 12px; color: var(--muted); margin-top: 6px; }
.origin p { margin: 6px 0 0; font-size: 13px; color: var(--muted); font-style: italic; }
.archetype .backstory { font-size: 14px; line-height: 1.55; color: var(--text); }
.archetype .edge { font-size: 13px; color: var(--npc); }
.archetype .edge::before { content: '◆ '; color: var(--amber-dim); }
.improve-title { color: var(--amber); }

.save-tools { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
.save-tools h2 { font: 400 28px/1 var(--display); color: var(--amber); margin: 0; }
.save-tools .hint { margin: 0; font-size: 13px; color: var(--muted); }
.save-tools .hint.backup { margin: 4px -16px 0; padding: 14px 16px 0; border-top: 1px solid var(--line); }
.save-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.receive-panel { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.receive-panel label { font-size: 13px; color: var(--muted); }
.code { width: 100%; font: 12px/1.4 var(--mono); resize: vertical; word-break: break-all; }
/* Synchronisation : le code dans un cadre, comme une plaque gravée. */
.sync { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sync-label { margin: 0; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em; }
.sync-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sync-code {
  display: inline-block;
  font: 600 20px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--player);
  background: #0b0805;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  white-space: nowrap;
  -webkit-user-select: all;
  user-select: all;
  -webkit-touch-callout: default;
}
.sync-status { margin: 0; font-size: 14px; color: var(--muted); }
.sync-status.error { color: var(--bad); }
.sync-input { width: 100%; font: 600 18px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--muted);
  cursor: pointer;
}
.icon-btn:hover { color: var(--amber); border-color: var(--line); }
.icon-btn[aria-pressed="true"] { color: var(--amber); }
.icon-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.icon-btn svg, .save-buttons .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.save-buttons .btn { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; font-weight: 600; }

.link { background: none; border: 0; padding: 0; color: var(--amber-dim); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 13px; }
.link:disabled { color: var(--muted); text-decoration: none; cursor: default; }
/* Au clavier, le même liseré ambré partout (les lieux, les gens, les liens, les volets repliés). */
:is(.link, .place, .person, summary):focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Au doigt (téléphone, tablette) : des cibles d'au moins 44 px, comme les boutons. Un lien dans une
   phrase s'agrandit par une zone invisible, sans bouger la ligne. */
@media (pointer: coarse) {
  .btn, .place, .person { min-height: 44px; }
  .hint.backup .link { position: relative; }
  .hint.backup .link::after { content: ''; position: absolute; inset: -12px -4px; }
  .origin summary { padding: 10px 0; }
  :is(.prologue-actions, .dock-links, .recap-actions) .link { display: inline-flex; align-items: center; min-height: 44px; }
  .dock-links { row-gap: 0; }
}

/* Échanges (commerce, soins…) : un bloc repliable au-dessus des répliques. */
.npc-actions-wrap { margin-bottom: 12px; }
.npc-actions-wrap summary { cursor: pointer; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 0; list-style: none; }
.npc-actions-wrap summary::-webkit-details-marker { display: none; }
.npc-actions-wrap summary::before { content: '▸'; color: var(--amber-dim); margin-right: 8px; }
.npc-actions-wrap[open] summary::before { content: '▾'; }
.npc-actions-wrap summary .count { margin-left: 8px; padding: 0 6px; border: 1px solid var(--line); border-radius: 99px; color: var(--amber); }
.npc-actions-wrap[open] summary { margin-bottom: 8px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 20;
  background: var(--bad);
  color: #1a0b05;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  max-width: calc(100vw - 32px);
}
.toast.info { background: var(--good); color: #10160a; }

/* Nouvelle version disponible (application installée : pas de bouton « recharger ») */
.update-banner {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Avec left: 50%, la largeur se limiterait à la moitié de l'écran : le texte s'écrasait un mot par ligne. */
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 16px;
  background: var(--panel);
  border: 1px solid var(--amber-dim);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  font: 14px/1.35 var(--sans);
}
/* ─── Mobile : un seul défilement, comme un livre ──────────────
   Le récit puis les choix s'enchaînent dans la page ; l'en-tête reste visible avec
   les PV et les capsules. Cibles tactiles d'au moins 44 px, texte à 16 px. */
.vitals { display: none; }

@media (max-width: 860px) {
  /* Le haut de la barre du jeu (et de ce qui se cale dessous : la fiche, la conversation). */
  :root { --bar-top: max(8px, var(--top-gap)); }
  body { font-size: 16px; line-height: 1.65; }
  input, textarea { font-size: 16px; } /* sous 16 px, l'iPhone zoome à la saisie */
  .btn { min-height: 44px; }
  .btn.small { font-size: 14px; padding: 8px 12px; }

  .start { padding: max(32px, calc(env(safe-area-inset-top) + 24px)) max(16px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .start-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .btn.primary { min-height: 52px; font-size: 17px; }
  .archetype p { font-size: 14px; }
  .games li { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; }
  .games .game-status { grid-column: 1; grid-row: 2; font-size: 13px; }
  .games .game-actions { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; }
  .game-date { display: none; }

  .game { height: auto; min-height: 100dvh; }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 6;
    gap: 8px;
    padding: var(--bar-top) max(12px, var(--safe-right)) 8px max(12px, var(--safe-left));
    background: var(--bg);
  }
  .brand { font-size: 24px; }
  .scene-title { display: none; }
  .brand { flex: none; }
  .vitals { display: flex; flex-direction: column; align-items: flex-end; flex: 1; min-width: 0; overflow: hidden; font-size: 12px; line-height: 1.35; color: var(--muted); white-space: nowrap; }
  .vitals b { color: var(--amber); font-weight: 600; }
  .vitals .low { color: var(--bad); }
  .vitals-state { display: flex; align-items: center; gap: 6px; }
  .vitals .test-badge { margin-left: 0; padding: 0 5px; font-size: 10px; line-height: 1.3; }
  /* Trois lignes (la soif, le mode test) : serrées, elles tiennent dans la hauteur des boutons. */
  .vitals:has(.vitals-state) { line-height: 1.2; }
  .sheet-toggle { display: inline-flex; align-items: center; }
  #restart { display: inline-flex; align-items: center; }

  .layout { display: block; }
  .story { border-right: 0; }
  .log { overflow: visible; padding: 20px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
  .entry { scroll-margin-top: calc(68px + var(--bar-top)); }
  .entry.scene h2 { font-size: 28px; }
  .entry.check, .entry.system, .entry.gain, .entry.loss { font-size: 14px; }
  .dock { max-height: none; overflow: visible; padding: 16px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  /* Une police proportionnelle pour lire : deux fois plus de mots par ligne qu'en chasse fixe. */
  .log, .choice, .archetype p, .npc-actions .btn, .ending, .teaser, .sound-hint, .place, .person { font-family: var(--sans); }
  .log { font-size: 17px; line-height: 1.6; }
  .entry.scene { margin-top: 24px; }
  .entry.scene h2 { font-size: 26px; line-height: 1.05; }
  .entry.scene h2::before { content: none; }
  .entry.scene.act-end h2 { font-size: 40px; line-height: 0.95; }
  .who { font-family: var(--mono); }
  .choice { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding: 11px 12px; min-height: 48px; font-size: 16px; line-height: 1.4; }
  .choice .stat { grid-column: 2; margin: 3px 0 0; font-family: var(--mono); }
  .choice .num { font-family: var(--mono); font-size: 14px; }
  .choices { gap: 8px; }
  .save-buttons .btn { flex: 1 1 140px; text-align: center; justify-content: center; }
  .save-tools .save-buttons .btn { flex-basis: 100%; } /* un bouton par ligne : ils ne se coupent plus */
  .sync-row { flex-wrap: nowrap; gap: 2px; }
  .sync-code { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: clamp(12px, 3.7vw, 20px); letter-spacing: 0.04em; padding: 12px 8px; text-align: center; }
  .save-tools .hint, .option-hint { font-family: var(--sans); font-size: 14px; }
  .options .volume { width: min(160px, 38vw); }
  .npc-actions-wrap summary { min-height: 44px; display: flex; align-items: center; }

  .npc-actions .btn { flex: 1 1 100%; white-space: normal; }

  .sheet {
    position: fixed;
    inset: 0;
    z-index: 5;
    background: var(--bg);
    display: none;
    padding: calc(68px + var(--bar-top)) max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .sheet.open { display: block; }
  .kv, .list { font-size: 15px; }

  .toast { bottom: calc(16px + env(safe-area-inset-bottom)); width: calc(100vw - 32px); text-align: center; }
}
/* Téléphones étroits : les PV, l'eau et les capsules passent avant le logo, et les boutons se serrent
   pour leur laisser la place. S'il en manque encore, une ligne passe à la ligne : rien n'est coupé. */
@media (max-width: 480px) {
  .brand { display: none; }
  .topbar { gap: 6px; }
  .topbar .btn.journal-toggle { padding-inline: 9px; min-width: 44px; justify-content: center; }
  .topbar :is(.btn.sheet-toggle, #restart) { padding: 8px 10px; }
  .vitals { align-items: flex-start; white-space: normal; }
}
@media (max-width: 400px) {
  .vitals { font-size: 11px; }
}
@media (max-width: 380px) {
  .sync-code { letter-spacing: 0; padding: 12px 4px; }
}

/* ─── Récit : pensées et carnet ──────────────────────────────── */
.entry.thought { color: var(--thought); font-style: italic; padding-left: 14px; border-left: 2px dotted rgba(216, 185, 138, 0.5); }
.entry.journal-note { margin: 4px 0 12px; }
/* L'illustration d'une page de carnet (encre et aquarelle) : en grand, fondue dans le noir sur ses
   bords, comme le visage d'une conversation. Le geste d'écrire se pose sur le bas du fondu. */
.illustration { margin: 8px 0 0; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, #000 55%, transparent 100%); }
.illustration img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transform: scale(1.06); } /* les bords déchirés du carnet restent hors champ */
/* Le croquis du carnet (au crayon, sur fond transparent) : posé sur le papier jauni du carnet. */
.illustration.croquis { background: #e6d6b4; }
.illustration.croquis img { transform: none; mix-blend-mode: multiply; }
/* La scène peinte (d'après le croquis), en gros pixels ambre : le canevas garde le 4:3 de l'image. */
.illustration.peinte canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; image-rendering: pixelated; }
.illustration.peinte img { transform: none; }
.illustration + .link { position: relative; margin-top: -20px; }
.entry.journal-note .link { font-family: var(--hand); font-size: 20px; color: var(--amber-dim); text-decoration: none; }
.entry.journal-note .link:hover { text-decoration: underline; }
.entry.journal-note .link svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.teaser { max-width: 60ch; margin: 28px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.sound-hint { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.sound-hint[hidden] { display: none; }
/* Devant l'horizon animé, le texte garde une ombre pour rester lisible. */
.start .teaser, .start .sound-hint, .start .tagline { text-shadow: 0 1px 2px var(--bg), 0 0 10px var(--bg); }
.sound-hint svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.game-actions { display: inline-flex; gap: 6px; }
.game-actions .delete { color: var(--muted); }
.game-actions .delete[data-confirm] { color: var(--bg); background: var(--amber); border-color: var(--amber); }

/* Bouton du carnet, avec le nombre de pages pas encore lues */
.journal-toggle { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.journal-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--amber); color: var(--bg); font: 600 11px/18px var(--mono); text-align: center; }

/* ─── Dialogue plein écran ─────────────────────────────────────
   Le visage occupe une moitié de l'écran ; la conversation, l'autre. */
body.talking, body.reading { overflow: hidden; }
.talk {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(300px, 42vw) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'face top' 'face main';
  background: var(--bg);
}
.talk-portrait { grid-area: face; position: relative; min-height: 0; background: #000; border-right: 1px solid var(--line); overflow: hidden; }
.talk-face { position: absolute; inset: 0; }
/* Vignette : on regarde le visage comme à travers un judas. */
.talk-face::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0, 0, 0, 0.8) 100%); pointer-events: none; }
.talk-id { position: absolute; left: 0; right: 0; bottom: 0; padding: 72px 24px calc(22px + var(--safe-bottom)) max(24px, var(--safe-left)); background: linear-gradient(to bottom, transparent, rgba(10, 7, 4, 0.94) 60%); display: grid; gap: 6px; }
.talk-id h2 { margin: 0; font: 400 clamp(40px, 5vw, 60px)/0.9 var(--display); color: var(--npc); letter-spacing: 0.03em; text-shadow: 0 0 18px rgba(0, 0, 0, 0.8); }
.talk-id .npc-role { margin: 0; color: var(--muted); font-size: 14px; }
.talk-main { grid-area: main; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.talk-top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(12px, var(--top-gap)) max(clamp(16px, 3vw, 40px), var(--safe-right)) 12px clamp(16px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.talk-place { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talk-log { flex: 1; min-height: 0; overflow-y: auto; padding: 24px max(clamp(16px, 3vw, 40px), var(--safe-right)) 8px clamp(16px, 3vw, 40px); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
.talk-log > * { max-width: 68ch; }
.talk-log .entry.npc { font-size: 18px; }
.talk-dock { border-top: 1px solid var(--line); background: var(--bg-2); padding: 14px max(clamp(16px, 3vw, 40px), var(--safe-right)) calc(18px + var(--safe-bottom)) clamp(16px, 3vw, 40px); max-height: 58%; overflow-y: auto; }
.talk-dock .choice { font-family: var(--sans); }
/* Un bavard lancé : il parle tout seul ; on le laisse faire, ou on l'interrompt. */
.talk-dock .flow-hint { margin: 0 0 10px; color: var(--muted); font: italic 13px/1.4 var(--sans); }
.talk-dock .choice.listen { font-style: italic; }

.silhouette { position: absolute; inset: 12% 10% 0; width: 80%; height: 88%; fill: rgba(155, 132, 96, 0.2); stroke: rgba(201, 138, 42, 0.55); stroke-width: 2; stroke-dasharray: 6 6; }

@media (max-width: 860px) {
  /* Téléphone : le visage reste au fond pendant toute la conversation. Le fil défile par-dessus
     (.talk-main) et s'efface en fondu sur le premier tiers de l'écran : en haut, on voit toujours
     le visage. Plus on descend, plus il pâlit un peu (--fade, réglé par le défilement). */
  .talk { display: block; overflow: hidden; --face-h: 66dvh; --text-top: 56dvh; }
  .talk.no-face { --face-h: 40dvh; --text-top: 34dvh; }
  .talk-portrait { position: absolute; inset: 0; border-right: 0; z-index: 0; background: var(--bg); }
  .talk-face { bottom: auto; height: var(--face-h); opacity: calc(1 - 0.25 * var(--fade, 0)); -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent); mask-image: linear-gradient(to bottom, #000 50%, transparent); }
  /* Le nom se pose au bas du visage, juste au-dessus du texte, et s'efface dès qu'on descend. */
  .talk-id { bottom: calc(100dvh - var(--text-top)); padding: 0 max(16px, env(safe-area-inset-left)) 8px; background: none; opacity: calc(1 - 2.5 * var(--fade, 0)); }
  .talk-id h2 { font-size: 46px; }
  .talk-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; border-bottom: 0; background: linear-gradient(to bottom, rgba(8, 6, 3, 0.8), rgba(8, 6, 3, 0.4) 70%, transparent); padding: var(--bar-top) max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left)); }
  .talk-main {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Le fondu : rien sous la barre du haut, puis le texte revient peu à peu jusqu'au tiers de l'écran. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(56px + var(--bar-top)), #000 34%);
    mask-image: linear-gradient(to bottom, transparent 0, transparent calc(56px + var(--bar-top)), #000 34%);
  }
  .talk-log { overflow: visible; margin-top: var(--text-top); padding: 24px max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left)); background: linear-gradient(to bottom, transparent, rgba(18, 13, 7, 0.72) 96px); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
  /* Une nouvelle réplique s'arrête juste sous le fondu, là où on la lit en entier. */
  .talk-log .entry { scroll-margin-top: 34dvh; }
  /* Les répliques prolongent le fond du texte, sans trait qui couperait le visage. */
  .talk-dock { max-height: none; overflow: visible; border-top: 0; background: linear-gradient(to bottom, rgba(18, 13, 7, 0.72), rgba(18, 13, 7, 0.9) 120px); padding: 16px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  /* Un bavard lancé : ses répliques défilent, et de quoi l'interrompre reste collé en bas de l'écran. */
  /* La réplique qui arrive s'arrête juste au-dessus (--dock-h : la hauteur du dock, mesurée par app.js). */
  .talk.flowing .talk-dock { position: sticky; bottom: 0; background: linear-gradient(to bottom, rgba(18, 13, 7, 0), var(--bg-2) 28px); padding-top: 28px; }
  .talk.flowing .talk-log .entry { scroll-margin-bottom: calc(var(--dock-h, 260px) + 12px); }
  .portrait { image-rendering: auto; }
  .journal-toggle .label { display: none; }
  /* Dans le récit, l'illustration va d'un bord à l'autre de l'écran ; elle ne s'efface qu'en haut et en bas.
     Sa note n'a pas la largeur de lecture du texte : sur une tablette debout, elle s'arrêtait avant le bord. */
  .log > .entry.journal-note { max-width: none; }
  .log .illustration {
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right)));
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 66%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 66%, transparent);
  }
}

/* ─── Le carnet ────────────────────────────────────────────────
   Un carnet de terrain : papier jauni, lignes, écriture à la main. */
/* ─── Le monde : ce qu'ont fait les autres, en pourcentage ───── */
.world { position: fixed; inset: 0; z-index: 15; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); padding: max(24px, var(--top-gap)) max(16px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.world-page { max-width: 720px; margin: 0 auto; }
.world-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.world-head h2 { margin: 0; font: 400 40px/1 var(--display); color: var(--amber); letter-spacing: 0.03em; }
.world-intro, .world-note { color: var(--muted); font-size: 14px; line-height: 1.5; }
.world-rare { margin: 0 0 20px; padding: 12px 14px; border-left: 2px solid var(--amber); background: rgba(255, 180, 59, 0.07); color: var(--text); }
.world-act h3 { margin: 28px 0 10px; font: 400 28px/1 var(--display); color: var(--amber-dim); }
.world-quest { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: rgba(27, 20, 11, 0.9); }
.world-quest h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; color: var(--text); font-size: 15px; font-weight: 600; }
.world-total { color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
.world-quest ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.world-path { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'label pct' 'bar bar'; align-items: center; gap: 4px 12px; color: var(--npc); font-size: 14px; }
.world-path.you { color: var(--amber); font-weight: 600; }
.world-path.locked { color: var(--muted); }
.world-label { grid-area: label; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.world-label svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.world-path .tag { flex: none; }
.world-bar { grid-area: bar; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.world-bar span { display: block; height: 100%; background: var(--amber-dim); }
.world-path.you .world-bar span { background: var(--amber); }
.world-path.locked .world-bar span { background: var(--muted); opacity: 0.5; }
.world-pct { grid-area: pct; text-align: right; font-variant-numeric: tabular-nums; }
.world-quest.unplayed { opacity: 0.75; }
.world-link { display: block; margin-top: 14px; font-size: 14px; }
.ending-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dock-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; }
.dock-links .world-link { margin-top: 0; }
@media (max-width: 860px) {
  .world-head h2 { font-size: 32px; }
  .world-intro, .world-note, .world-rare, .world-path, .world-quest h4 { font-family: var(--sans); }
}

/* ─── Ce que vos choix ont changé : la reprise, dans l'esprit du monde ─────
   Ce qui est arrivé, zone par zone ; les noms, comme au carnet ; les récurrents, visage et humeur ;
   ce qui t'attend ; et les chemins fermés, grisés, derrière un cadenas. */
.recap .world-head h2 { line-height: 1.05; }
.recap-section h3 { margin: 28px 0 10px; font: 400 28px/1 var(--display); color: var(--amber-dim); }
.recap ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.recap-zone h4 { margin-bottom: 8px; }
.recap-lines li, .recap-ahead li { position: relative; padding-left: 14px; color: var(--npc); font-size: 14px; line-height: 1.5; }
.recap-lines li::before, .recap-ahead li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--amber-dim); }
.recap-ahead li { color: var(--text); }
.recap-page { margin: 0; padding: 12px 16px; border-left: 2px solid var(--amber); background: rgba(255, 180, 59, 0.07); color: var(--text); font: 400 20px/1.4 var(--hand); }
.recap-page p { margin: 0; }
.recap-page .recap-page-place { margin-bottom: 6px; color: var(--muted); font: 400 12px/1.3 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; }
.recap-names li { padding: 10px 14px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 6px; background: rgba(27, 20, 11, 0.9); color: var(--text); font: 400 19px/1.35 var(--hand); }
.recap-names .rendu { border-left-color: var(--good); }
.recap-names .pris { border-left-color: var(--bad); }
.recap-people { gap: 6px; }
.recap-person { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(27, 20, 11, 0.9); }
.recap-person img, .recap-noface { display: block; width: 44px; height: 58px; object-fit: cover; border-radius: 3px; background: var(--bg-2); }
.recap-who { display: grid; min-width: 0; }
.recap-who b { color: var(--text); font-size: 15px; font-weight: 600; }
.recap-who small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.recap-mood { display: grid; justify-items: end; gap: 5px; color: var(--npc); font-size: 13px; white-space: nowrap; }
.recap-mood .mood-bar { width: 64px; }
.recap-person.dead { opacity: 0.65; }
.recap-person.dead img { filter: grayscale(1) brightness(0.7); }
.recap-person.dead .recap-mood { color: var(--bad); }
.recap-closed li { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: 14px; line-height: 1.45; opacity: 0.85; }
.recap-closed svg { width: 13px; height: 13px; flex: none; transform: translateY(1px); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 32px; }
.recap-open { margin-top: 8px; }
@media (max-width: 860px) {
  .recap-lines li, .recap-ahead li, .recap-closed li, .recap-who, .recap-mood { font-family: var(--sans); }
}
.journal { position: fixed; inset: 0; z-index: 9; overflow-y: auto; overscroll-behavior: contain; background: rgba(8, 6, 3, 0.94); padding: max(24px, var(--top-gap)) 12px 48px; }
.journal-book {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px clamp(20px, 6vw, 56px) 56px clamp(36px, 8vw, 72px);
  color: var(--ink);
  font: 400 22px/32px var(--hand);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 180px 120px at 85% 12%, rgba(120, 80, 30, 0.18), transparent 70%),
    linear-gradient(to right, transparent 26px, rgba(170, 60, 50, 0.35) 26px 27px, transparent 27px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(60, 90, 120, 0.22) 31px 32px);
  border-radius: 3px 6px 6px 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(90, 60, 20, 0.25);
}
.journal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.journal-head h2 { margin: 0; font: 600 40px/1 var(--hand); }
.journal-close { font: 600 20px/1 var(--hand); color: var(--ink); background: none; border: 1px solid rgba(44, 34, 22, 0.4); border-radius: 3px; padding: 8px 14px; cursor: pointer; min-height: 44px; }
.journal-close:focus-visible, .journal-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.journal-owner { margin: 0 0 8px; opacity: 0.7; font-size: 20px; }
.journal-tabs { display: flex; gap: 18px; margin: 0 0 16px; border-bottom: 1px solid rgba(44, 34, 22, 0.25); }
.journal-tab { background: none; border: 0; padding: 4px 0; font: 600 22px/32px var(--hand); color: rgba(44, 34, 22, 0.55); cursor: pointer; border-bottom: 2px solid transparent; }
.journal-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.journal-day { margin-bottom: 32px; }
.journal-day h3 { margin: 0; font: 600 28px/32px var(--hand); }
.journal-day h3 span { font-weight: 400; opacity: 0.75; }
.journal-day p, .journal-notes li { margin: 0 0 32px; }
.journal-day p { margin-bottom: 0; text-indent: 1.2em; }
.journal-day p + p { margin-top: 0; }
.journal-place { text-indent: 0 !important; font-weight: 600; opacity: 0.75; }
.journal-sketch { margin: 16px 0; }
.journal-sketch img { display: block; width: 100%; max-width: 520px; } /* le crayon seul, sur fond transparent : il se pose sur le papier du carnet */
.journal-notes ul { margin: 0; padding-left: 1.1em; }
.journal-notes li { margin-bottom: 16px; }
.journal-empty { opacity: 0.6; font-style: italic; }
/* Le reste à faire : une note griffonnée en tête du carnet, encadrée au crayon. */
.journal-todo { margin: 0 0 32px; padding: 0 14px 4px; border: 1.5px solid rgba(44, 34, 22, 0.35); border-radius: 4px 9px 5px 11px; transform: rotate(-0.4deg); }
.journal-todo h3 { margin: 0; font: 600 24px/32px var(--hand); }
.journal-todo ul { margin: 0; padding-left: 1.1em; }
.journal-todo li { margin: 0 0 8px; }
.journal-end { text-align: center; font-weight: 600; margin-top: 16px; }

/* ─── Les pages du Bassin (onglet du carnet) ─────────────────────
   Chaque document d'avant est collé au scotch, de travers, la date notée au crayon au-dessus ; une
   page qui manque est un cadre en pointillés. Une base commune (.doc), puis un papier par forme. */
.pages { display: grid; gap: 34px; padding-bottom: 8px; }
.pages-compteur { margin: 0 0 -12px; font: 600 28px/1 var(--hand); color: rgba(44, 34, 22, 0.7); transform: rotate(-1deg); }
.page-entree { display: grid; gap: 12px; scroll-margin-top: 16px; }
.page-quand { margin: 0 0 -4px; font: 600 22px/1 var(--hand); color: #57534d; transform: rotate(-2deg); transform-origin: left; }
.page-note { margin: 0; font: 400 22px/1.15 var(--hand); color: #3f3a33; transform: rotate(-0.4deg); }
.page-manque { margin: 0; padding: 12px 14px; border: 2px dashed rgba(87, 83, 77, 0.4); font: 400 21px/1.1 var(--hand); color: rgba(87, 83, 77, 0.8); text-align: center; transform: rotate(0.4deg); }
.entry.page-trouvee .link { color: var(--amber); }

.doc { position: relative; margin: 0; max-width: 100%; transform: rotate(var(--rot, 0deg)); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), 0 6px 14px rgba(40, 25, 10, 0.22); color: #2a2119; text-indent: 0; line-height: normal; }
.doc p { margin: 0; text-indent: 0; }
.doc h3 { margin: 0; }
.doc .scotch { position: absolute; top: -12px; width: 78px; height: 24px; z-index: 2; background: linear-gradient(180deg, rgba(255, 246, 200, 0.55), rgba(240, 225, 170, 0.45)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); clip-path: polygon(2% 8%, 98% 0, 100% 92%, 0 100%); }
.doc .scotch.g { left: 14px; transform: rotate(-7deg); }
.doc .scotch.d { right: 14px; transform: rotate(6deg); }
.doc .crayon, .doc .enfant { font: 400 23px/1.05 var(--hand); color: #57534d; }

/* Livre de classe */
.doc-manuel { background: radial-gradient(18% 12% at 88% 92%, rgba(150, 110, 40, 0.12), transparent 70%), #f2e7c9; padding: 22px 22px 16px; font: 17px/1.5 'IM Fell English', Georgia, serif; }
.doc-manuel .lecon { font: 15px/1 'IM Fell English SC', Georgia, serif; letter-spacing: 0.16em; text-align: center; color: #6b5a40; }
.doc-manuel h3 { margin: 6px 0 10px; font: italic 34px/1 'IM Fell English', Georgia, serif; text-align: center; }
.doc-manuel .riviere { display: block; width: 100%; height: 26px; margin: 0 0 10px; }
.doc-manuel .corps { text-align: justify; hyphens: auto; }
.doc-manuel .corps::first-letter { float: left; font-size: 52px; line-height: 0.85; padding: 4px 6px 0 0; color: #3b2d1a; }
.doc-manuel .questions { margin-top: 12px; font-style: italic; color: #4a3d2a; }
.doc-manuel .enfant { margin-top: 8px; text-align: right; transform: rotate(-6deg); font-size: 25px; }
.doc-manuel .folio { margin-top: 10px; text-align: center; font-size: 14px; color: #8a7756; letter-spacing: 0.3em; }

/* Plaque de bronze */
.doc-plaque { padding: 28px 26px; text-align: center; border-radius: 3px; background: radial-gradient(circle at 14px 14px, #3a2a14 0 4px, #c49a5c 4.5px 6px, transparent 6.5px), radial-gradient(circle at calc(100% - 14px) 14px, #3a2a14 0 4px, #c49a5c 4.5px 6px, transparent 6.5px), radial-gradient(circle at 14px calc(100% - 14px), #3a2a14 0 4px, #c49a5c 4.5px 6px, transparent 6.5px), radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #3a2a14 0 4px, #c49a5c 4.5px 6px, transparent 6.5px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px), linear-gradient(135deg, #5d4019, #b48448 35%, #7b5526 55%, #c79b5a 80%, #6e4b20); box-shadow: inset 0 0 0 3px rgba(60, 40, 15, 0.6), inset 0 0 0 6px rgba(220, 180, 110, 0.35), 0 8px 18px rgba(0, 0, 0, 0.35); color: #3a2610; font: 17px/1.45 'IM Fell English SC', Georgia, serif; letter-spacing: 0.04em; text-shadow: 0 1px 0 rgba(255, 228, 170, 0.45), 0 -1px 0 rgba(40, 25, 5, 0.5); }
.doc-plaque h3 { margin: 0 0 12px; font: 26px/1.1 'IM Fell English SC', Georgia, serif; letter-spacing: 0.1em; }
.doc-plaque .devise { margin-top: 12px; font: italic 20px/1.3 'IM Fell English', Georgia, serif; }
.doc-plaque .clou { margin-top: 18px; font: 600 30px/1 'Reenie Beanie', cursive; color: rgba(255, 240, 205, 0.85); transform: rotate(-5deg); letter-spacing: 0.12em; }

/* Affiches : le concours de pêche (deux encres), la Foire (bois et étoiles) */
.doc-affiche-peche, .doc-affiche-foire { padding: 22px 20px; text-align: center; overflow: hidden; }
.doc-affiche-peche { background: radial-gradient(rgba(36, 80, 122, 0.16) 1px, transparent 1.6px) 0 0 / 6px 6px, #f1e2be; border: 6px double #24507a; }
.doc-affiche-peche .sur { font: 15px/1 'Oswald', sans-serif; letter-spacing: 0.3em; color: #24507a; text-transform: uppercase; }
.doc-affiche-peche h3 { margin: 6px 0 2px; font: 40px/0.92 'Alfa Slab One', serif; color: #b8372b; text-transform: uppercase; }
.doc-affiche-peche .poisson { width: 120px; height: 46px; margin: 10px auto 4px; display: block; }
.doc-affiche-peche .quand { font: 26px/1 'Alfa Slab One', serif; color: #24507a; margin: 6px 0 10px; }
.doc-affiche-peche .lot { font: 500 16px/1.4 'Oswald', sans-serif; color: #3b2b20; }
.doc-affiche-peche .rustine { position: absolute; right: -26px; bottom: 22px; width: 150px; height: 34px; transform: rotate(-32deg); background: linear-gradient(180deg, rgba(90, 80, 60, 0.75), rgba(60, 52, 40, 0.8)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.doc-affiche-foire { color: #f6d27a; background: repeating-conic-gradient(from 0deg at 50% 115%, #3a120d 0 6deg, #2a0c09 6deg 12deg); border: 5px solid #f6d27a; box-shadow: inset 0 0 0 3px #3a120d, inset 0 0 0 5px #f6d27a, 0 6px 14px rgba(0, 0, 0, 0.3); }
.doc-affiche-foire .cri { font: 17px/1.2 'Rye', serif; letter-spacing: 0.04em; }
.doc-affiche-foire h3 { margin: 10px 0; font: 40px/0.95 'Rye', serif; color: #ffe39a; text-shadow: 3px 3px 0 #9c2b1c; }
.doc-affiche-foire .etoiles { letter-spacing: 0.5em; color: #ffe39a; font: 18px/1 'Rye', serif; }
.doc-affiche-foire .numero { margin: 6px 0; border: 2px solid #f6d27a; padding: 6px 8px; font: 19px/1.15 'Rye', serif; }
.doc-affiche-foire .numero:first-of-type { margin-top: 12px; }
.doc-affiche-foire .prix { margin-top: 12px; font: 500 16px/1.4 'Oswald', sans-serif; color: #f1c0a0; letter-spacing: 0.04em; }

/* À la machine à écrire : avis, ordres, feuilles de route */
.doc-dactylo, .doc-dactylo-militaire, .doc-dactylo-gazole { background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), transparent 30%), #f4f0e4; padding: 20px 20px 18px; font: 15.5px/1.55 'Special Elite', 'Courier New', monospace; }
.doc-dactylo-militaire { background: repeating-linear-gradient(0deg, rgba(60, 80, 60, 0.05) 0 1px, transparent 1px 3px), #e9ead9; }
.doc-dactylo-gazole { background: radial-gradient(60% 45% at 78% 70%, rgba(80, 55, 20, 0.28), rgba(80, 55, 20, 0.12) 55%, transparent 70%), radial-gradient(30% 25% at 20% 18%, rgba(80, 55, 20, 0.12), transparent 70%), #efe7d2; }
:is(.doc-dactylo, .doc-dactylo-militaire, .doc-dactylo-gazole) .tete { text-align: center; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid rgba(40, 30, 20, 0.5); padding-bottom: 8px; margin-bottom: 10px; }
:is(.doc-dactylo, .doc-dactylo-militaire, .doc-dactylo-gazole) .ref { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: #4a4238; margin-bottom: 10px; }
:is(.doc-dactylo, .doc-dactylo-militaire, .doc-dactylo-gazole) .crayon { margin-top: 10px; transform: rotate(-1.5deg); }
:is(.doc-dactylo, .doc-dactylo-militaire, .doc-dactylo-gazole) .tampon { position: absolute; right: 16px; bottom: 14px; }
.doc .signature { margin-top: 10px; font: 30px/1 'La Belle Aurore', cursive; color: #1f2a4a; transform: rotate(-3deg); transform-origin: left; }
.doc .tampon { display: inline-block; padding: 4px 10px; border: 3px solid #b2362b; border-radius: 4px; color: #b2362b; font: 22px/1 'Allerta Stencil', 'Special Elite', monospace; letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(-11deg); opacity: 0.78; mix-blend-mode: multiply; filter: blur(0.3px); }

/* Réclame découpée dans le journal */
.doc-reclame { background: radial-gradient(rgba(0, 0, 0, 0.07) 0.8px, transparent 1.2px) 0 0 / 4px 4px, #e8e3d6; padding: 14px; }
.doc-reclame .cadre { border: 3px double #2b2722; padding: 16px 14px; text-align: center; }
.doc-reclame .goutte { width: 46px; height: 58px; margin: 0 auto 8px; display: block; }
.doc-reclame .regie { font: 600 13px/1.2 'Oswald', sans-serif; letter-spacing: 0.3em; text-transform: uppercase; }
.doc-reclame h3 { margin: 8px 0; font: 600 34px/0.98 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; }
.doc-reclame .corps { font: 16px/1.45 'IM Fell English', serif; }
.doc-reclame .accroche { margin-top: 10px; font: italic 22px/1.2 'IM Fell English', serif; }
.doc-reclame .date { margin-top: 10px; font: 500 14px/1 'Oswald', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; border-top: 1px solid #2b2722; padding-top: 8px; }

/* Brochure de Haute-Source : le luxe, plié en deux */
.doc-brochure { color: #efe6cf; padding: 26px 22px; text-align: center; background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 3%, transparent 49%, rgba(0, 0, 0, 0.25) 50%, rgba(255, 255, 255, 0.05) 51%, transparent 53%), radial-gradient(120% 90% at 50% 0%, #2c5440, #173326 70%); font: 17px/1.5 'Cormorant Garamond', Georgia, serif; }
.doc-brochure .res { font: 500 13px/1 'Cormorant Garamond', serif; letter-spacing: 0.42em; text-transform: uppercase; color: #d8bf7f; }
.doc-brochure h3 { margin: 12px 0; padding-bottom: 12px; font: 500 38px/1 'Cormorant Garamond', serif; letter-spacing: 0.04em; background: linear-gradient(#d8bf7f, #d8bf7f) center bottom / 70px 1px no-repeat; }
.doc-brochure .accroche { margin-top: 12px; font: italic 500 26px/1.15 'Cormorant Garamond', serif; color: #f4e3b0; }
.doc-brochure .reserve { margin-top: 12px; font-size: 14px; letter-spacing: 0.06em; color: #c9d6c8; }

/* Le formulaire de la Régie : en-tête, champs, perforation, tampon */
.doc-formulaire { background: #f2eedf; padding: 0 0 14px; font: 15px/1.5 'Special Elite', monospace; overflow: hidden; }
.doc-formulaire .bandeau { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #1f4a6b; color: #e8eef2; }
.doc-formulaire .bandeau svg { width: 28px; height: 34px; flex: none; }
.doc-formulaire .bandeau b { font: 600 15px/1.1 'Oswald', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.doc-formulaire .bandeau small { display: block; font: 12px/1.2 var(--mono); letter-spacing: 0.08em; opacity: 0.8; }
.doc-formulaire .champ { display: flex; gap: 8px; align-items: baseline; padding: 0 16px; }
.doc-formulaire .champ:first-of-type { padding-top: 12px; }
.doc-formulaire .champ i { font: italic 12px/1 var(--mono); color: #5c6b78; white-space: nowrap; }
.doc-formulaire .champ span { flex: 1; min-width: 0; border-bottom: 1px dotted #6b7a86; }
.doc-formulaire .corps { padding: 8px 16px; }
.doc-formulaire .agent { padding: 0 16px; font-size: 13.5px; color: #3b4a56; }
.doc-formulaire .perfo { margin: 12px 0 0; height: 0; border-top: 2px dashed rgba(60, 70, 80, 0.45); }
.doc-formulaire .talon { padding: 8px 16px 0; font: 12px/1.3 var(--mono); color: #5c6b78; }
.doc-formulaire .tampon { position: absolute; right: 14px; top: 132px; }
.doc-formulaire .tache { position: absolute; left: 30%; top: 50%; width: 120px; height: 90px; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 95, 60, 0.18), rgba(110, 95, 60, 0.08) 70%, transparent); pointer-events: none; }

/* La une du journal */
.doc-une { background: radial-gradient(rgba(0, 0, 0, 0.05) 0.7px, transparent 1.1px) 0 0 / 3px 3px, #ebe5d4; padding: 14px 16px 16px; }
.doc-une .nom-journal { text-align: center; font: 34px/1 'UnifrakturMaguntia', serif; border-bottom: 3px double #1f1b16; padding-bottom: 6px; }
.doc-une .filet { display: flex; justify-content: space-between; gap: 8px; font: 11.5px/1.6 var(--mono); border-bottom: 1px solid #1f1b16; text-transform: uppercase; letter-spacing: 0.08em; }
.doc-une h3 { margin: 10px 0 8px; font: 600 31px/0.98 'Oswald', sans-serif; text-transform: uppercase; text-align: center; }
.doc-une .photo { height: 120px; margin: 4px 0; position: relative; background: radial-gradient(60% 50% at 50% 70%, rgba(255, 210, 140, 0.55), transparent 70%), radial-gradient(rgba(0, 0, 0, 0.55) 1px, transparent 1.8px) 0 0 / 4px 4px, linear-gradient(180deg, #4a4540, #23201c); }
.doc-une .photo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.doc-une .legende { font: italic 13.5px/1.3 'IM Fell English', serif; margin-bottom: 8px; }
.doc-une .colonnes { columns: 2 14ch; column-gap: 16px; column-rule: 1px solid rgba(0, 0, 0, 0.25); font: 15px/1.4 'IM Fell English', serif; text-align: justify; hyphens: auto; }

/* Lettres à la main : papier ligné, quadrillé, pelure */
.doc-lettre, .doc-lettre-quadrille, .doc-lettre-pelure { padding: 22px 20px 20px 34px; font: 23px/1.33 'La Belle Aurore', cursive; color: #1f2a4a; }
.doc-lettre { background: linear-gradient(90deg, transparent 0 24px, rgba(178, 54, 43, 0.3) 24px 25px, transparent 25px), repeating-linear-gradient(180deg, transparent 0 29px, rgba(70, 110, 170, 0.28) 29px 30px), linear-gradient(180deg, transparent 49.6%, rgba(0, 0, 0, 0.07) 50%, transparent 50.6%), #f6f1e3; }
.doc-lettre-quadrille { background: linear-gradient(180deg, transparent 49.6%, rgba(0, 0, 0, 0.08) 50%, transparent 50.6%), repeating-linear-gradient(90deg, transparent 0 15px, rgba(70, 110, 170, 0.18) 15px 16px), repeating-linear-gradient(180deg, transparent 0 15px, rgba(70, 110, 170, 0.18) 15px 16px), #f3f2ea; padding-left: 20px; }
.doc-lettre-pelure { background: linear-gradient(180deg, transparent 33%, rgba(0, 0, 0, 0.05) 33.4%, transparent 34%), linear-gradient(180deg, transparent 66%, rgba(0, 0, 0, 0.05) 66.4%, transparent 67%), #eef0ee; color: #3a3550; padding-left: 20px; }
.doc .fin { margin-top: 6px; text-align: right; }

/* Écrit au dos d'une facture : l'imprimé passe à travers */
.doc-facture { background: #f3efe2; padding: 18px 18px 20px; overflow: hidden; }
.doc-facture .envers { position: absolute; inset: 10px 14px; margin: 0; transform: scaleX(-1); font: 13px/1.6 var(--mono); color: rgba(30, 30, 30, 0.12); white-space: pre; overflow: hidden; pointer-events: none; }
.doc-facture .mot { position: relative; font: 27px/1.12 'Reenie Beanie', cursive; color: #1c2238; }
.doc-facture .souligne { text-decoration: underline double; text-decoration-color: #1c2238; text-underline-offset: 4px; }

/* Petits mots : un carton de pare-soleil, un papier d'emballage */
.doc-billet, .doc-billet-kraft { padding: 18px 18px 16px; font: 27px/1.1 'Reenie Beanie', cursive; color: #22202a; background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 40%), #e9dcc0; max-width: 470px; }
.doc-billet::after { content: ''; position: absolute; top: 10px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: #3a2f22; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3); }
.doc-billet-kraft { background: repeating-linear-gradient(87deg, rgba(90, 60, 25, 0.06) 0 2px, transparent 2px 6px), #c8a46e; color: #2a2014; }
:is(.doc-billet, .doc-billet-kraft) p + p { margin-top: 8px; }

/* Papier thermique : une bande étroite, déchirée, qui s'efface */
.doc-thermique { width: min(100%, 300px); margin-inline: auto; padding: 26px 18px; background: #f7f6f1; font: 13.5px/1.55 var(--mono); color: #3b3b3b; text-transform: uppercase; clip-path: polygon(0 4%, 6% 0, 12% 3%, 18% 0, 24% 3%, 30% 0, 36% 3%, 42% 0, 48% 3%, 54% 0, 60% 3%, 66% 0, 72% 3%, 78% 0, 84% 3%, 90% 0, 96% 3%, 100% 0, 100% 96%, 94% 100%, 88% 97%, 82% 100%, 76% 97%, 70% 100%, 64% 97%, 58% 100%, 52% 97%, 46% 100%, 40% 97%, 34% 100%, 28% 97%, 22% 100%, 16% 97%, 10% 100%, 4% 97%, 0 100%); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.45), #000 18%, #000 82%, rgba(0, 0, 0, 0.5)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.45), #000 18%, #000 82%, rgba(0, 0, 0, 0.5)); }
.doc-thermique .etoiles { letter-spacing: 0.12em; text-align: center; overflow: hidden; white-space: nowrap; }
.doc-thermique .centre { text-align: center; }

/* Pochoir sur tôle : l'avis au pied du Mur */
.doc-pochoir { padding: 20px 18px; color: #1d1d1d; background: radial-gradient(20% 18% at 12% 85%, rgba(150, 70, 20, 0.45), transparent 70%), radial-gradient(14% 22% at 90% 20%, rgba(150, 70, 20, 0.4), transparent 70%), radial-gradient(circle at 10px 10px, #2b2b2b 0 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 10px) 10px, #2b2b2b 0 3px, transparent 3.5px), linear-gradient(180deg, #a02a1f 0 44px, #d6d0bf 44px); font: 17px/1.35 'Allerta Stencil', 'Special Elite', monospace; text-transform: uppercase; }
.doc-pochoir .haut { color: #f1e6d3; letter-spacing: 0.12em; text-align: center; margin: -8px 0 18px; font-size: 16px; }
.doc-pochoir .barre { margin-top: 8px; color: #555; text-decoration: line-through 2px #333; }
.doc-pochoir .feutre { margin-top: 10px; font: 40px/0.95 'Reenie Beanie', cursive; color: #111; text-transform: none; transform: rotate(-4deg); }

/* Le carnet du milicien : un petit carnet à spirale, au crayon, et une coulure de verre */
.doc-petit-carnet { width: min(100%, 420px); padding: 20px 18px 22px 34px; font: 25px/1.18 'Reenie Beanie', cursive; color: #4a4741; background: radial-gradient(circle at 12px 18px, var(--paper) 0 4px, transparent 4.5px) 0 0 / 100% 30px, repeating-linear-gradient(180deg, transparent 0 29px, rgba(80, 80, 80, 0.18) 29px 30px), #f1ede2; }
.doc-petit-carnet p + p { margin-top: 8px; }
.doc-petit-carnet .verre { position: absolute; right: -8px; bottom: -10px; width: 110px; height: 80px; border-radius: 45% 55% 40% 60%; background: radial-gradient(35% 30% at 35% 30%, rgba(255, 255, 255, 0.85), transparent 70%), radial-gradient(closest-side, rgba(170, 220, 215, 0.55), rgba(120, 180, 175, 0.35) 70%, transparent); box-shadow: inset -4px -6px 10px rgba(40, 90, 85, 0.25); }

/* Le plan du métro, annoté */
.doc-plan-metro { background: linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px) 0 0 / 22px 22px, #efe9da; padding: 14px 14px 12px; }
.doc-plan-metro svg { display: block; width: 100%; height: auto; }
.doc-plan-metro .annot { font: 25px/1.1 'Reenie Beanie', cursive; color: #1d2a55; }
.doc-plan-metro .croix { margin-top: 8px; font: 22px/1 'Reenie Beanie', cursive; color: #5a1f1a; letter-spacing: 0.2em; word-break: break-all; }

/* L'affichette des Salines, sous verre */
.doc-sous-verre { padding: 10px; background: linear-gradient(135deg, #8d8a82, #c9c6bd 40%, #7d7a72); }
.doc-sous-verre .feuille { position: relative; padding: 18px; font: 20px/1.45 'Architects Daughter', cursive; color: #222; background: radial-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1.6px) 0 0 / 9px 11px, #f8f7f1; }
.doc-sous-verre .feuille::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 38%, transparent 46%, transparent 62%, rgba(255, 255, 255, 0.3) 66%, transparent 70%); pointer-events: none; }
.doc-sous-verre h3 { margin: 0 0 6px; font: 26px/1.1 'Architects Daughter', cursive; text-decoration: underline; text-underline-offset: 5px; }

/* La charte de Radeau : peinte sur une planche */
.doc-planche { padding: 20px 18px; color: #17140f; font: 30px/1.05 'Reenie Beanie', cursive; background: repeating-linear-gradient(0deg, rgba(60, 40, 20, 0.12) 0 2px, transparent 2px 9px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 17px), linear-gradient(180deg, #b79a73, #a88a62 50%, #b3966e); border-radius: 4px 9px 5px 8px; }
.doc-planche .signes { display: block; width: 100%; height: 54px; margin-top: 10px; }

/* Le journal des relais : un registre à colonnes */
.doc-registre { background: #f1ecdf; padding: 14px 16px 16px; }
.doc-registre .tete-r { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #3b3a52; padding-bottom: 6px; margin-bottom: 6px; font: 600 15px/1 'Oswald', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #3b3a52; }
.doc-registre .ligne { display: grid; grid-template-columns: 4.2em 1fr; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(59, 58, 82, 0.2); }
.doc-registre .h { font: 14px/1.8 var(--mono); color: #3b3a52; font-variant-numeric: tabular-nums; }
.doc-registre .e { font: 24px/1.1 'Reenie Beanie', cursive; color: #22305a; min-width: 0; }
.doc-registre .sig { text-align: right; font: 46px/0.8 'La Belle Aurore', cursive; color: #22305a; margin-top: 4px; }

@media (max-width: 480px) {
  .doc-affiche-peche h3, .doc-affiche-foire h3 { font-size: 32px; }
  .doc-une h3 { font-size: 26px; }
  .doc-reclame h3, .doc-brochure h3 { font-size: 29px; }
}
@media (prefers-reduced-motion: no-preference) {
  .doc { transition: transform 0.25s ease; }
  .doc:hover { transform: rotate(0deg) scale(1.01); }
}
@media (max-width: 860px) {
  .journal { padding: calc(12px + var(--safe-top)) 8px calc(32px + env(safe-area-inset-bottom)); }
  .journal-book { font-size: 21px; padding-left: 40px; padding-right: 18px; }
  .journal-head h2 { font-size: 34px; }
}

/* ─── Prologue ─────────────────────────────────────────────── */
.prologue { position: fixed; inset: 0; z-index: 9; overflow-y: auto; background: radial-gradient(ellipse at 50% 20%, #2a1d0c 0%, var(--bg) 70%) fixed, var(--bg); display: grid; place-items: center; padding: max(32px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.prologue-page { max-width: 62ch; animation: fade-in 0.6s ease both; }
.prologue-img { display: block; width: min(280px, 60vw); aspect-ratio: 3 / 4; object-fit: cover; margin: 0 0 20px; border: 1px solid var(--line); filter: sepia(0.35) saturate(0.85) contrast(1.05); }
/* Les portraits d'origine en gros pixels, comme les visages des conversations : la palette est déjà dans le rendu. */
canvas.archetype-img, canvas.prologue-img { filter: none; image-rendering: pixelated; background: var(--bg-2, #120d08); }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .prologue-page { animation: none; } }
.prologue-step { margin: 0 0 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; }
.prologue h2 { margin: 0 0 20px; font: 400 clamp(44px, 9vw, 72px)/0.95 var(--display); color: var(--amber); text-shadow: 0 0 18px rgba(255, 180, 59, 0.3); }
.prologue-page > p:not(.prologue-step) { font: 18px/1.7 var(--sans); margin: 0 0 16px; }
.prologue-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.prologue-dots { display: flex; gap: 8px; margin-top: 24px; }
/* L'ouverture (le monde, le métier) : sombre et sobre, comme une fin d'acte ; les paragraphes viennent l'un après l'autre. */
.prologue.ouverture { background: #070504; }
.prologue.ouverture .prologue-page .lent { opacity: 0; transform: translateY(6px); transition: opacity 1.1s ease, transform 1.1s ease; }
.prologue.ouverture .prologue-page .lent.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .prologue.ouverture .prologue-page .lent { transition: none; } }
/* Le carnet, onglet « Le Bassin » : l'ouverture, à relire. */
.journal-bassin { display: grid; gap: 22px; }
.journal-bassin h3 { margin: 0 0 8px; font-family: inherit; font-size: 1.45em; line-height: 1.1; color: inherit; }
.journal-bassin p { margin: 0 0 12px; }
.prologue-dots span { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--amber-dim); }
.prologue-dots span.on { background: var(--amber); }

/* ─── Attente en temps réel ─────────────────────────────────── */
.waiting { max-width: 72ch; display: grid; gap: 10px; }
.waiting h2 { margin: 0; font: 400 30px/1.05 var(--display); color: var(--amber); }
.wait-bar { height: 10px; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: #0b0805; }
.wait-fill { height: 100%; background: repeating-linear-gradient(-45deg, var(--amber-dim) 0 8px, var(--amber) 8px 16px); transition: width 1s linear; animation: wait-march 1.2s linear infinite; background-size: 22.6px 22.6px; }
@keyframes wait-march { to { background-position: 22.6px 0; } }
@media (prefers-reduced-motion: reduce) { .wait-fill { animation: none; transition: none; } }
.wait-left { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.waiting .hint { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 860px) {
  .waiting h2 { font-size: 28px; }
  .waiting .hint { font-family: var(--sans); font-size: 14px; }
}

/* ─── Le son ───────────────────────────────────────────────── */
.sound-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.sound-toggle .label { margin-left: 6px; }
.sound-toggle .cross { display: none; }
.sound-toggle.muted .wave { display: none; }
.sound-toggle.muted .cross { display: inline; }
.sound-toggle.muted { color: var(--muted); }
/* Le haut-parleur de l'accueil, sur la ligne du titre : ambré quand le son joue, barré et terne quand il est coupé. */
.start-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.start-title .logo { white-space: nowrap; overflow-wrap: normal; } /* un seul mot, jamais coupé (même en japonais) */
@media (max-width: 359px) { .start-title .logo { font-size: 54px; } } /* les plus petits téléphones : le haut-parleur tient à côté */
.title-sound { display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; border: 1px solid var(--amber-dim); border-radius: 50%; background: rgba(255, 180, 59, 0.1); color: var(--amber); cursor: pointer; transition: opacity 0.45s ease, background 0.15s, border-color 0.15s, color 0.15s; }
.title-sound svg { width: 22px; height: 22px; }
.title-sound:hover { background: rgba(255, 180, 59, 0.18); }
.title-sound:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.title-sound.muted { border-color: var(--line); border-style: dashed; background: transparent; color: var(--muted); }
.sheet-sound-row { display: none; }
@media (max-width: 860px) { .topbar .sound-toggle .label { display: none; } }
@media (max-width: 480px) {
  .topbar .sound-toggle { display: none; }
  .sheet-sound-row { display: flex; align-items: center; }
}

/* ─── Écran d'accueil : le menu, puis un panneau à la fois ───── */
/* Dès le premier affichage, le titre et l'horizon, comme l'écran de lancement (public/splash/) ;
   le reste, qui dépend de la langue et des parties, arrive avec le menu, en fondu. Le pied vient en
   dernier : sur iPhone, la page de l'application installée change encore de hauteur au lancement, et
   un pied fixé en bas, montré tout de suite, sautait avec elle. */
.start :is(.tagline, .menu) { transition: opacity 0.45s ease; }
.start:not([data-shown]) :is(.title-sound, .tagline, .menu) { visibility: hidden; opacity: 0; }
.start-foot { transition: opacity 0.6s ease 0.5s; }
.start:not([data-shown]) .start-foot { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .start :is(.title-sound, .tagline, .menu, .start-foot) { transition: none; } }
.start-head { margin-bottom: 36px; }
.start-head .tagline { margin-bottom: 0; }
.menu { display: grid; gap: 10px; max-width: 460px; padding-bottom: 170px; } /* la place du pied */
/* Le pied de l'accueil, fixé en bas, sur le sol de l'horizon (accueil.js lui laisse la place). */
.start-foot {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(860px, 100%);
  display: grid;
  padding: 0 max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
/* Trois voix, du plus fort au plus discret : la phrase du monde, le conseil du casque, la version. */
.start-foot .teaser, .start-foot .sound-hint { margin: 0; }
.start-foot .teaser { max-width: none; font-size: 15px; font-style: italic; line-height: 1.4; color: var(--thought); }
.phrase { display: inline-block; } /* un morceau de phrase qui ne se coupe pas */
.start-foot .sound-hint { margin-top: 14px; font-size: 12px; line-height: 1.4; }
.start-foot .sound-hint svg { color: var(--amber-dim); }
.build { margin: 8px 0 0; font: 10px/1.4 var(--mono); color: var(--muted); opacity: 0.55; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 14px 18px;
  background: rgba(32, 24, 13, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--amber);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.menu-item:hover:not(:disabled) { background: rgba(255, 180, 59, 0.08); border-color: var(--amber-dim); transform: translateX(3px); }
.menu-item:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.menu-item:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.55; }
.menu-label { font: 400 30px/1 var(--display); letter-spacing: 0.04em; }
.menu-detail { font-size: 13px; color: var(--muted); }
.menu-detail:empty { display: none; }
.menu-item.primary { background: var(--amber); border-color: var(--amber); color: var(--bg); }
.menu-item.primary .menu-detail { color: rgba(18, 13, 7, 0.7); }
.menu-item.primary:hover:not(:disabled) { background: #ffc766; }
.menu-item.minor { padding: 6px 18px; background: none; border-color: transparent; }
.menu-item.minor .menu-label { font: 14px/1.4 var(--mono); color: var(--amber-dim); text-decoration: underline; text-underline-offset: 3px; letter-spacing: 0; }

.panel { animation: fade-in 0.25s ease both; }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }
.panel-head { display: grid; gap: 6px; margin-bottom: 20px; }
.panel-head h2 { font: 400 40px/1 var(--display); color: var(--amber); margin: 0; letter-spacing: 0.03em; }
/* Retour : un vrai bouton, facile à viser au pouce (44 px au moins), pas un lien souligné. */
.link.panel-back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px 8px 14px; font: 600 15px/1 var(--mono); letter-spacing: 0.04em; color: var(--amber); text-decoration: none; background: rgba(27, 20, 11, 0.94); border: 1px solid var(--amber-dim); border-radius: var(--radius); }
.link.panel-back:hover { background: rgba(255, 180, 59, 0.1); }
.link.panel-back:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Les réglages, comme une fiche : une carte, une ligne par réglage, séparées d'un filet. Le nom à
   gauche, en clair ; le réglage à droite (dessous s'il est large) ; l'explication en dessous. */
.options, .save-tools { max-width: 560px; background: rgba(27, 20, 11, 0.94); border: 1px solid var(--line); border-radius: 6px; }
.options { display: grid; }
.option-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; padding: 16px; }
.option-row + .option-row { border-top: 1px solid var(--line); }
.option-row.stack { grid-template-columns: minmax(0, 1fr); }
.option-row.stack .segmented { display: flex; }
.option-row.stack .segment { flex: 1 1 0; padding-inline: 6px; white-space: nowrap; }
.full-code-row { grid-column: 1 / -1; display: flex; gap: 10px; }
.full-code-row .sync-input { flex: 1 1 auto; min-width: 0; user-select: text; -webkit-user-select: text; }
.option-name { color: var(--text); font-size: 15px; letter-spacing: 0.02em; }
.option-controls { display: flex; align-items: center; gap: 14px; }
.option-hint { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 60ch; }
/* Le nom de la ligne dit déjà « Son » : le bouton n'a que son icône (et son nom pour les lecteurs d'écran). */
.options .sound-toggle { display: inline-grid; place-items: center; width: 44px; height: 40px; padding: 0; }
.options .sound-toggle .label { display: none; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.segment { background: transparent; border: 0; border-left: 1px solid var(--line); padding: 8px 14px; color: var(--text); cursor: pointer; font-size: 14px; min-height: 40px; }
.segment:first-child { border-left: 0; }
.segment:hover { background: rgba(255, 180, 59, 0.08); }
.segment[aria-checked="true"] { background: var(--amber); color: var(--bg); font-weight: 600; }
.segment:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
/* La langue : une liste déroulante, chaque langue avec sa pastille. */
.lang-menu { position: relative; }
.lang-current { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px 6px 7px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font: 14px/1 var(--mono); cursor: pointer; }
.lang-current:hover, .lang-current[aria-expanded="true"] { border-color: var(--amber-dim); background: rgba(255, 180, 59, 0.06); }
.lang-current:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.lang-chevron { margin-left: 2px; color: var(--amber-dim); font-size: 12px; transition: transform 0.15s; }
.lang-current[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }
.lang-flag { display: block; width: 27px; height: 18px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(241, 217, 168, 0.25); }
.lang-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 100%; margin: 0; padding: 4px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6); }
.lang-list:focus { outline: none; }
.lang-list[hidden] { display: none; }
.lang-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px 6px 6px; border-radius: 3px; color: var(--text); font-size: 14px; white-space: nowrap; cursor: pointer; }
.lang-option:hover, .lang-option.active { background: rgba(255, 180, 59, 0.1); }
.lang-option[aria-selected="true"] .lang-flag { box-shadow: 0 0 0 2px var(--amber); }
.lang-option[aria-selected="true"] .lang-name { color: var(--amber); }
@media (prefers-reduced-motion: reduce) { .lang-chevron { transition: none; } }
.volume { width: 160px; accent-color: var(--amber); background: none; border: 0; padding: 0; }
.version { margin-top: 28px; font-size: 12px; color: var(--muted); }

/* ─── Taille du texte (options) ───── */
html[data-size="large"] :is(.log, .dock, .talk-log, .talk-dock, .sheet, .journal-book, .prologue-page, .fin-acte-page, .world-page) { zoom: 1.12; }
html[data-size="xl"] :is(.log, .dock, .talk-log, .talk-dock, .sheet, .journal-book, .prologue-page, .fin-acte-page, .world-page) { zoom: 1.25; }

/* ─── Ordinateur : le jeu tient dans un cadre centré, à la taille d'une tablette ───── */
@media (min-width: 861px) {
  .game {
    max-width: 1240px;
    margin: 0 auto;
    height: min(100dvh, 980px);
    border-inline: 1px solid var(--line);
    background: rgba(18, 13, 7, 0.55);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.5);
  }
  .talk {
    inset: max(0px, calc((100dvh - 980px) / 2)) max(0px, calc((100vw - 1240px) / 2));
    grid-template-columns: minmax(300px, 42%) minmax(0, 1fr);
    border: 1px solid var(--line);
    box-shadow: 0 0 0 100vmax rgba(5, 3, 1, 0.85);
  }
}
@media (min-width: 861px) and (min-height: 1000px) {
  .game { margin-top: calc((100dvh - 980px) / 2); border-block: 1px solid var(--line); }
}

/* ─── Le japonais : ses polices (chargées à la demande, voir i18n.js) et ses coupures de ligne ───── */
:root:lang(ja) {
  --mono: 'IBM Plex Mono', 'M PLUS 1 Code', ui-monospace, Menlo, monospace;
  --sans: 'IBM Plex Sans', 'IBM Plex Sans JP', system-ui, -apple-system, 'Hiragino Sans', sans-serif;
  --display: 'VT323', 'DotGothic16', monospace;
  --hand: 'Klee One', 'Caveat', cursive;
}
:lang(ja) { line-break: strict; overflow-wrap: anywhere; }
/* Le japonais ne penche pas : une italique y serait fabriquée par le navigateur, de travers. */
:root:lang(ja) :is(*, *::before, *::after) { font-style: normal; }
/* Sur téléphone, « ステータス » et « メニュー » sont plus larges que « Fiche » et « Menu » : on les resserre, pour que les PV et l'eau tiennent. */
@media (max-width: 480px) {
  :root:lang(ja) :is(.sheet-toggle, #restart) { padding: 8px 10px; }
  :root:lang(ja) .vitals { font-size: 11px; }
}

/* ─── Les moments en plein écran ──────────────────────────────
   Le temps qui passe et la fin d'un acte : l'écran se vide, sombre et sobre, et le moment prend toute
   la place. Pas de cadre, pas d'ornement : la nuit, un chiffre, du texte. */
.temps {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: #050403;
  opacity: 0;
  transition: opacity 0.45s ease;
  cursor: pointer;
}
.temps.ouvert { opacity: 1; }
.temps.part { opacity: 0; }
.temps-carte { display: grid; gap: 26px; justify-items: center; text-align: center; }
.temps-jour { display: flex; gap: 0.28em; align-items: baseline; margin: 0; font: 400 clamp(72px, 16vw, 132px)/1 var(--display); color: var(--amber); letter-spacing: 0.03em; }
.temps-mot { font-size: 0.38em; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.temps-n { display: inline-block; min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.temps-n.tombe { animation: jour-tombe 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes jour-tombe { from { opacity: 0; transform: translateY(-0.3em); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.temps-gourde { display: flex; gap: 6px; }
.temps-gourde span { width: 14px; height: 20px; border: 1px solid var(--player); border-radius: 2px 2px 5px 5px; opacity: 0.55; transition: background-color 0.35s ease, opacity 0.35s ease; }
.temps-gourde span.plein { background: rgba(143, 211, 195, 0.55); opacity: 1; }
.temps-echeance { display: grid; gap: 10px; justify-items: center; width: min(340px, 72vw); }
.temps-reste { margin: 0; font: 500 14px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--text); }
.temps-barre { width: 100%; height: 2px; background: var(--line); }
.temps-barre span { display: block; height: 100%; width: calc(var(--part, 1) * 100%); background: var(--bad); transition: width 0.4s ease; }
.temps-soif { margin: 0; font: 500 14px/1.4 var(--mono); color: var(--bad); }

.fin-acte {
  position: fixed;
  inset: 0;
  z-index: 12;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 max(20px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(20px, env(safe-area-inset-left));
  background: #070504;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.fin-acte.ouvert { opacity: 1; }
.fin-acte.part { opacity: 0; transition-duration: 0.5s; }
body.fin-acte-ouverte { overflow: hidden; }
.fin-acte-page { max-width: 38em; min-height: 100%; margin: 0 auto; padding: max(14vh, calc(48px + env(safe-area-inset-top))) 0 10vh; display: flex; flex-direction: column; justify-content: center; }
.fin-acte-surtitre { margin: 0 0 16px; font: 500 13px/1.2 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--amber-dim); }
.fin-acte h2 { margin: 0 0 34px; font: 400 clamp(46px, 9vw, 76px)/0.95 var(--display); color: var(--amber); text-wrap: balance; }
.fin-acte-texte p { margin: 0 0 14px; font: 400 17px/1.7 var(--sans); color: var(--text); }
.fin-acte-marques { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; font: 400 14px/1.5 var(--sans); }
.fin-acte-marques .gain { color: var(--good); }
.fin-acte-marques .loss { color: var(--bad); }
.fin-acte-point { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.fin-acte-question { margin: 0 0 14px; font: 500 12px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-dim); }
.fin-acte-choix { display: grid; gap: 8px; }
.fin-acte-choix .choice { font-family: var(--sans); }
.fin-acte-liens { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; }
/* La fin de la démo : le même écran, et l'adresse où laisser un avis (elle se sélectionne). */
.fin-demo-avis { margin-top: 30px; }
.fin-demo-avis p { margin: 0 0 8px; font: 400 15px/1.6 var(--sans); color: var(--muted); }
.fin-demo-mail { font: 500 17px/1.4 var(--mono); color: var(--amber); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.fin-acte .lent { opacity: 0; transform: translateY(6px); transition: opacity 0.9s ease, transform 0.9s ease; }
.fin-acte .lent.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .temps, .fin-acte, .fin-acte .lent, .temps-gourde span, .temps-barre span { transition: none; }
  .temps-n.tombe { animation: none; }
}

/* Le dé en plein écran (app.js, rollDie) : un d20 en gros pixels ambre qui tombe et roule ; dessous, le
   total qui suit la face de devant, le seuil, puis l'issue du moteur. Sombre et sobre, comme le reste. */
.de-plein {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: #050403;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.de-plein.ouvert { opacity: 1; }
.de-plein.part { opacity: 0; }
.de-scene { display: grid; justify-items: center; gap: 10px; text-align: center; max-width: 34em; }
.de-canvas { width: min(300px, 64vw); height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.de-total { display: flex; gap: 14px; align-items: baseline; margin: 0; font-variant-numeric: tabular-nums; }
.de-bonus { font: 400 22px/1 var(--mono); color: var(--muted); }
.de-somme { min-width: 2ch; font: 400 64px/1 var(--display); color: var(--text); transition: color 0.12s; }
.de-plein.reach .de-somme { color: var(--good); }
.de-seuil { margin: 0; font: 500 13px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.de-issue { min-height: 4.6em; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; }
.de-plein.revele .de-issue { opacity: 1; transform: none; }
.de-titre { margin: 8px 0 4px; font: 400 30px/1.1 var(--display); letter-spacing: 0.02em; text-wrap: balance; }
.de-plein.ok .de-titre { color: var(--good); }
.de-plein.rate .de-titre { color: var(--bad); }
.de-plein.crit.ok .de-titre { color: var(--amber); }
.de-detail { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--muted); }
.de-plein.pose .de-canvas { animation: de-pose 0.32s ease-out; }
.de-plein.revele.rate .de-canvas { animation: de-rate 0.42s ease-in-out; }
.de-plein.revele.crit .de-canvas { animation: de-crit 0.9s ease-out; }
@keyframes de-pose { 0% { transform: scale(1.08); } 60% { transform: scale(0.96); } 100% { transform: none; } }
@keyframes de-rate { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes de-crit { 0% { filter: drop-shadow(0 0 22px var(--amber)); transform: scale(1.1); } 100% { filter: none; transform: none; } }

/* Le voyage en plein écran (app.js, ouvrirVoyage) : la route d'une zone à l'autre, ses jours, le marcheur
   qui avance au fil de l'attente. Sous la barre du haut, la fiche et le carnet, qui restent à portée. */
.topbar { position: relative; z-index: 6; }
.voyage {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: calc(84px + var(--top-gap, 0px)) max(20px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: #050403;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.voyage.ouvert { opacity: 1; }
.voyage-scene { display: grid; justify-items: center; gap: 22px; width: min(560px, 100%); text-align: center; }
.voyage-sur { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.voyage h2 { margin: -10px 0 8px; font: 400 clamp(34px, 6vw, 48px)/1 var(--display); color: var(--amber); text-wrap: balance; }
.voyage-route { width: 100%; display: grid; gap: 10px; }
.voyage-bouts { display: flex; justify-content: space-between; font: 500 13px/1.3 var(--mono); color: var(--text); letter-spacing: 0.04em; }
.voyage-chemin { position: relative; height: 34px; margin: 0 6px; }
.voyage-trace { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--line); }
.voyage-fait { position: absolute; left: 0; top: calc(50% - 1px); height: 2px; background: var(--amber-dim); transition: width 1s linear; }
.voyage-cran { position: absolute; top: calc(50% - 7px); width: 2px; height: 14px; margin-left: -1px; background: var(--muted); }
.voyage-cran span, .voyage-depart span { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 400 12px/1 var(--mono); color: var(--muted); }
.voyage-depart { position: relative; height: 0; }
.voyage-depart span { top: -12px; left: 6px; transform: none; }
.voyage-marcheur { position: absolute; top: calc(50% - 6px); width: 12px; height: 12px; margin-left: -6px; background: var(--amber); box-shadow: 0 0 12px rgba(255, 180, 59, 0.6); transition: left 1s linear; animation: marcheur 1.1s steps(2) infinite; }
@keyframes marcheur { 50% { transform: translateY(-2px); } }
.voyage-reste { margin: 6px 0 0; font: 400 15px/1.4 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.voyage .hint { margin: 0; max-width: 34em; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .voyage, .voyage-fait, .voyage-marcheur { transition: none; animation: none; }
}
.voyage-bouts span { display: inline-block; }
.voyage-bouts span::first-letter { text-transform: uppercase; }