/* Le thème par défaut. Le thème d'un livre peut remplacer chacune de ces variables. */
:root {
  color-scheme: var(--scheme);
  --scheme: light;
  --blend: multiply; /* screen sur un fond sombre : multiply y rendrait les ambiances invisibles */
  --paper: #fff;
  --ink: #26231f;
  --faint: #8a857c;
  --line: #dedbd5;
  --sea: 44, 95, 115;
  --flame: 232, 158, 72;
  --wine: 110, 35, 40;
  --floo: 72, 158, 104; /* le vert des flammes de Cheminette */
  --text-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.6rem);
  --text-leading: 1.55;
  --title-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.2rem);
  --measure: 35rem; /* la largeur de la colonne de texte */
  --lettrine: 3; /* la hauteur de la lettrine en début de chapitre, en lignes ; normal pour s'en passer */
  --ornament: none; /* un signe sous le titre et à la fin, entre guillemets : "❦" */
  --leave: 0.45s;
}

/* Redéclarées sur chaque livre de la couverture : sans cela, un livre qui s'en remet aux valeurs par défaut hériterait du thème du livre survolé. */
:root,
#stories > div {
  --accent: #2c5f73;
  --text-font: "Cormorant Garamond", Georgia, serif;
  --title-font: var(--text-font);
  --plain: ui-sans-serif, system-ui, sans-serif; /* l'interface : le bas de page et les notes d'état. Un livre peut y mettre sa police */
}

::selection {
  background: var(--accent);
  color: var(--paper);
}

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 0.2em;
}

* {
  box-sizing: border-box;
}

/* Le fond est aussi sur html, et body couvre toute la fenêtre : sans cela, WebKit peut laisser une bande de l'ancienne couleur en bas après un redimensionnement. */
html {
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text-font);
  transition:
    background-color var(--leave) ease,
    color var(--leave) ease;
}

[hidden] {
  display: none !important;
}

button {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

/* Couverture */

#start {
  padding: 10svh 1.5rem 4rem;
  text-align: center;
}

#stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 15rem));
  justify-content: center;
  gap: 3rem 2.5rem;
  max-width: 72rem;
  margin: 0 auto;
}

#stories .cover {
  display: block;
  aspect-ratio: 2 / 3;
  margin-bottom: 1.1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--accent);
  font-family: var(--title-font);
  font-size: 5rem;
  line-height: 1;
  place-content: center;
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.22);
  transition: transform 0.3s ease;
}

#stories .cover img {
  display: block;
  width: 100%;
  height: 100%;
}

#stories button:hover .cover,
#stories button:focus-visible .cover {
  transform: translateY(-0.3rem);
}

#stories .title,
#stories .tagline {
  display: block;
  transition: color 0.3s ease;
}

#stories .title {
  font-family: var(--title-font);
  font-size: 1.4rem;
  line-height: 1.2;
}

#stories .tagline {
  margin-top: 0.4rem;
  color: var(--faint);
  font-family: var(--text-font);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  #stories .cover {
    transition: none;
  }

  #stories button:hover .cover,
  #stories button:focus-visible .cover {
    transform: none;
  }
}

#stories button:hover .title,
#stories button:hover .tagline {
  color: var(--accent);
}

/* La connexion : les mêmes champs que celui où l'on joue. */

#login {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 20rem;
  margin: 10svh auto 0;
}

#login input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  padding: 0.3rem 0;
  background: none;
  color: inherit;
  font-family: var(--text-font);
  font-size: 1.2rem;
}

#login input:focus {
  border-color: var(--accent);
}

#login input::placeholder {
  color: var(--faint);
}

#login button {
  color: var(--accent);
  font-family: var(--plain);
  font-size: 0.85rem;
}

#balance {
  margin: 2rem 0 0;
  color: var(--faint);
  font-family: var(--plain);
  font-size: 0.8rem;
}

#credits {
  margin-left: 0.8rem;
  color: var(--faint);
}

#signout {
  margin-top: 0.6rem;
  color: var(--faint);
  font-family: var(--plain);
  font-size: 0.75rem;
}

#signout:hover {
  color: var(--accent);
}

#status {
  margin: 1.2rem 0 0;
  color: var(--faint);
  font-family: var(--plain);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Le passage : ancré en haut pour que le texte ne bouge pas pendant qu'il s'écrit. */

#book {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 13svh 1.5rem 13rem;
  transition: opacity var(--leave) ease;
}

#book header {
  margin-bottom: 2.2rem;
}

/* L'ornement du livre, s'il en a un, sous le titre. */
#book header::after {
  content: var(--ornament);
  display: block;
  margin-top: 1rem;
  color: var(--accent);
  font-size: 1.1rem;
  line-height: 1;
}

#book .chapter {
  margin: 0 0 0.3rem;
  color: var(--accent);
  font-size: 1.1rem;
  font-variant-caps: small-caps;
  letter-spacing: 0.1em;
}

#book h2 {
  margin: 0;
  font-family: var(--title-font);
  font-size: var(--title-size);
  font-weight: 400;
  line-height: 1.2;
}

/* Dans l'application, le papier monte sous la barre de titre : cette bande permet encore de déplacer la fenêtre. */
#titlebar {
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 28px;
}

/* Les boutons de la fenêtre occupent le coin haut gauche. */
.desktop #library,
.desktop #preview-note {
  left: 5rem;
}

#preview-note {
  position: fixed;
  z-index: 3;
  top: 0.7rem;
  left: 0.9rem;
  margin: 0;
  padding: 0.2rem 0.6rem;
  background: var(--paper);
  color: var(--accent);
  font-family: var(--plain);
  font-size: 0.8rem;
}

/* Le décor vivant : au-dessus de l'illustration, sous le texte, et atténué derrière la colonne. */
#atmosphere {
  --above: 0px;
  position: fixed;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mask-image:
    linear-gradient(#000 var(--above), transparent calc(var(--above) + 12svh)),
    linear-gradient(
      90deg,
      #000 calc(50% - var(--measure) / 2 - 3rem),
      rgba(0, 0, 0, 0.42) calc(50% - var(--measure) / 2),
      rgba(0, 0, 0, 0.42) calc(50% + var(--measure) / 2),
      #000 calc(50% + var(--measure) / 2 + 3rem)
    );
  mask-composite: add;
  transition: opacity 1.4s ease;
}

#atmosphere.extinct {
  opacity: 0;
  transition-duration: 6s;
}

#book > :not(header),
#book header > :not(.illustration),
#book header::after {
  position: relative;
  z-index: 2;
}

#dock,
#library {
  z-index: 3;
}

/* L'illustration d'une scène : pleine largeur en haut de page, elle se dissout dans le papier avant le titre. */
#book .illustration {
  display: block;
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  height: 44svh;
  margin: -13svh 0 -3svh -50vw;
  object-fit: cover;
  object-position: center 35%;
  mask-image: linear-gradient(#000 45%, transparent);
  animation: illustration-in 1.4s ease;
}

@keyframes illustration-in {
  from {
    opacity: 0;
  }
}

/* Les écrits du monde, montrés sous le passage dans leur propre typographie. */
#book .document {
  margin: 2rem 0 0.5rem;
  color: var(--ink);
  hyphens: none;
}

#book .document.letter {
  width: fit-content;
  max-width: 100%;
  padding: 1.2rem 1.6rem;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 1px 7px rgba(var(--sea), 0.28);
  font-family: var(--letter-font, var(--text-font));
  font-size: 1.75rem;
  line-height: 1.25;
  transform: rotate(-1.2deg);
}

#book .document.gazette {
  padding: 1rem 1.2rem 1.2rem;
  border-block: 3px double var(--ink);
  font-family: var(--gazette-font, var(--text-font));
  font-size: 0.98rem;
  line-height: 1.4;
}

#book .gazette .masthead {
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--ink);
  font-family: var(--masthead-font, var(--title-font));
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.1;
  text-align: center;
}

#book .gazette .headline {
  margin: 0.7rem 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

#book .gazette .body {
  column-count: 2;
  column-gap: 1.4rem;
  column-rule: 1px solid var(--line);
  text-align: justify;
}

#book .gazette .body div + div {
  text-indent: 1em;
}

#book .document.radio {
  padding: 1rem 1.2rem;
  border-left: 3px solid rgba(var(--flame), 0.7);
  font-family: var(--radio-font, ui-monospace, monospace);
  font-size: 1.02rem;
  line-height: 1.55;
}

#book .document.roll {
  padding: 1.4rem 1rem;
  border-block: 1px solid var(--faint);
  font-family: var(--roll-font, var(--title-font));
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  line-height: 1.9;
  text-align: center;
}

#book .document.map {
  width: fit-content;
  max-width: 100%;
  padding: 1.2rem 1.6rem;
  border: 1px solid rgba(var(--sea), 0.4);
  background: rgba(255, 255, 255, 0.28);
  font-family: var(--map-font, var(--text-font));
  font-size: 1.4rem;
  line-height: 1.5;
}

/* Comme sur la Carte du Maraudeur, l'encre apparaît ligne après ligne. */
#book .map .body div {
  animation: ink-rises 1.6s ease both;
  animation-delay: calc(var(--line) * 0.9s);
}

@keyframes ink-rises {
  from {
    opacity: 0;
    filter: blur(3px);
  }
}

#book.leaving {
  opacity: 0;
}

#book p {
  margin: 0;
  font-size: var(--text-size);
  line-height: var(--text-leading);
  white-space: pre-wrap;
  -webkit-hyphens: auto;
  hyphens: auto;
  hanging-punctuation: first last;
  text-wrap: pretty;
  font-variant-numeric: oldstyle-nums;
}

/* Lettrine : au premier passage d'un chapitre, l'initiale descend sur quelques lignes. Avec `normal`, elle reste une lettre comme les autres. */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  #book p.opening::first-letter {
    -webkit-initial-letter: var(--lettrine);
    initial-letter: var(--lettrine);
    margin-right: 0.1em;
    color: var(--accent);
    font-family: var(--title-font);
  }

  @container style(--lettrine: normal) {
    #book p.opening::first-letter {
      margin-right: 0;
      color: inherit;
      font-family: inherit;
    }
  }
}

#book p.action {
  margin-top: 2.4rem;
  margin-bottom: 1.6rem;
  scroll-margin-top: 2rem;
  color: var(--accent);
  font-size: 1.2rem;
  font-style: italic;
}

#book p.said {
  margin-top: 1.8rem;
  margin-bottom: 0.5rem;
}

/* La réponse s'écrit sous le bas de page sinon : on garde la place du champ et des outils. */
#book p.answer {
  scroll-margin-bottom: 9rem;
}

#book p.writing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--accent);
  animation: blink 1s steps(2) infinite;
}

#book .fade {
  animation: fade 0.9s ease-out both;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
}

/* Le retour à l'accueil reste à portée en haut à gauche ; le fond garde le mot lisible quand le texte passe dessous. */

#library {
  position: fixed;
  top: 0.7rem;
  left: 0.9rem;
  padding: 0.2rem 0.6rem;
  background: var(--paper);
  color: var(--faint);
  font-family: var(--plain);
  font-size: 0.75rem;
}

#library:hover:not(:disabled) {
  color: var(--accent);
}

#library:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Le bas de page reste fixe : le champ ne saute pas quand le texte arrive. */

#dock {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.5rem 1.5rem 0.7rem;
  background: var(--paper);
}

/* Le décor se perd dans le bas de page en fondu long : une coupure nette se verrait sur une pluie ou une lueur. */
#dock::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 6rem;
  background: linear-gradient(
    transparent,
    color-mix(in srgb, var(--paper) 25%, transparent) 35%,
    color-mix(in srgb, var(--paper) 70%, transparent) 70%,
    var(--paper)
  );
  pointer-events: none;
}

#end,
#prompt,
#tools {
  max-width: calc(var(--measure) - 3rem);
  margin-right: auto;
  margin-left: auto;
}

/* La fin : le titre du dénouement, précédé de l'ornement du livre. Une défaite s'éteint. */
#end {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.3rem 0;
  color: var(--accent);
  font-family: var(--title-font);
  font-size: var(--title-size);
  line-height: 1.2;
  text-align: center;
}

#end::before {
  content: var(--ornament);
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--text-font);
  font-size: 1.1rem;
  line-height: 1;
}

#end[data-ending="lose"] {
  color: var(--faint);
}

#prompt {
  position: relative;
  transition: opacity var(--leave) ease;
}

/* L'autocomplétion des personnages, posée au-dessus du champ. */

#mentions {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  margin: 0 0 0.4rem;
  border: 1px solid var(--line);
  padding: 0.3rem 0;
  background: var(--paper);
  font-size: 1.2rem;
  list-style: none;
}

#mentions li {
  padding: 0.25rem 0.8rem;
}

#mentions [role="option"] {
  cursor: pointer;
}

#mentions [aria-selected="true"] {
  color: var(--accent);
}

#mentions .role,
#mentions .nobody {
  color: var(--faint);
  font-style: italic;
}

#mentions .role {
  margin-left: 0.5rem;
}

#prompt.away {
  opacity: 0;
  pointer-events: none;
}

#action {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  padding: 0.3rem 0;
  background: none;
  color: inherit;
  font-family: var(--text-font);
  font-size: 1.4rem;
  font-style: italic;
}

#action {
  caret-color: var(--accent);
}

#action:focus {
  border-color: var(--accent);
}

#action::placeholder {
  color: var(--faint);
}

#tools {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 0.8rem;
  color: var(--faint);
  font-family: var(--plain);
  font-size: 0.75rem;
}

#rewrite {
  justify-self: start;
}

#places {
  display: flex;
  gap: 0.9rem;
  justify-self: end;
}

#pager {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

#pager button {
  padding: 0 0.4rem;
  font-size: 1.1rem;
  line-height: 1;
}

#tools button:hover:not(:disabled) {
  color: var(--accent);
}

#tools button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Le multivers : une ligne par passage, les branches dessinées dans la gouttière. */

#map {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
}

#map[open] {
  display: flex;
  flex-direction: column;
  animation: fade 0.3s ease-out;
}

#map header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem 1.5rem 1rem;
}

#map h2 {
  margin: 0;
  font-family: var(--title-font);
  font-size: var(--title-size);
  font-weight: 400;
}

#close-map {
  color: var(--faint);
  font-family: var(--plain);
  font-size: 0.75rem;
}

#close-map:hover {
  color: var(--accent);
}

#branches {
  flex: 1;
  padding: 0 1.5rem 2rem;
  overflow: auto;
}

.branches {
  display: flex;
  width: max-content;
  min-width: min(100%, calc(var(--measure) - 3rem));
  margin: 0 auto;
}

.levels {
  position: sticky;
  z-index: 1;
  left: -1.5rem;
  flex: none;
  width: 7.5rem;
  margin-left: -1.5rem;
  padding-left: 1.5rem;
  background: var(--paper);
}

.levels p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding-right: 0.8rem;
  color: var(--faint);
  font-size: 1rem;
  line-height: 1.15;
}

.levels span {
  margin-bottom: 0.15rem;
  color: var(--accent);
  font-size: 0.85rem;
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.tree {
  position: relative;
  flex: none;
}

.tree svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.branches path {
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.5;
}

.branches path.on-path {
  stroke: var(--accent);
}

.branches circle {
  fill: var(--paper);
  stroke: var(--faint);
  stroke-width: 1.5;
}

.branches circle.on-path {
  stroke: var(--accent);
}

.branches circle.here {
  fill: var(--accent);
  stroke: var(--accent);
}

.branches button {
  position: absolute;
  display: flex;
  align-items: center;
  padding: 0 0.7rem 0 26px;
  text-align: left;
}

.branches button:disabled {
  cursor: default;
}

.branches .deed {
  display: -webkit-box;
  overflow: hidden;
  color: var(--faint);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.branches .on-path .deed {
  color: var(--ink);
}

.branches [aria-current] .deed,
.branches button:hover:not(:disabled) .deed {
  color: var(--accent);
}

/* Sous le passage, en petites capitales : ce qui vient d'entrer au carnet, les dés, et les jauges, dont celle qui vient de changer. */

#book p.gain,
#book p.gauges {
  margin-top: 1.2rem;
  color: var(--accent);
  font-size: 1.05rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
  white-space: normal;
}

#book p.gain + p.gauges {
  margin-top: 0.3rem;
}

#book p.gauges {
  color: var(--faint);
}

#book p.gauges span + span::before {
  content: " · ";
  color: var(--faint);
}

#book p.gauges .changed {
  color: var(--accent);
}

/* Les interactions suggérées, au-dessus du champ. */

#hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  margin-bottom: 0.3rem;
  color: var(--accent);
  font-size: 1.05rem;
  font-style: italic;
}

#hints button:hover {
  text-decoration: underline;
}

#help {
  display: block;
  margin: 0.4rem 0 0 auto;
  color: var(--faint);
  font-family: var(--plain);
  font-size: 0.75rem;
}

#help:hover {
  color: var(--accent);
}

/* Les mots que le narrateur a marqués : une piste, pas un lien. */

.mark {
  color: inherit;
  text-decoration: underline dotted var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.mark:hover,
.mark:focus-visible {
  color: var(--accent);
}

/* La bibliothèque : recommencer une partie déjà entamée. */

#stories .restart {
  display: block;
  margin: 0.5rem auto 0;
  color: var(--faint);
  font-family: var(--plain);
  font-size: 0.75rem;
}

#stories .restart:hover {
  color: var(--accent);
}

/* Le codex : une page entière, comme le multivers. */

#codex {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
}

#codex[open] {
  display: flex;
  flex-direction: column;
  animation: fade 0.3s ease-out;
}

#codex header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem 1.5rem 1rem;
}

#codex h2 {
  margin: 0;
  font-family: var(--title-font);
  font-weight: 400;
}

#codex h2 {
  font-size: var(--title-size);
}

#close-codex,
#codex-body .back {
  color: var(--faint);
  font-family: var(--plain);
  font-size: 0.75rem;
}

#close-codex:hover,
#codex-body .back:hover,
#codex-body li button:hover,
#codex-body .link {
  color: var(--accent);
}

#codex-body {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  overflow: auto;
  font-size: 1.25rem;
  line-height: 1.5;
}

#codex-body h3 {
  margin: 1.8rem 0 0.4rem;
  font-family: var(--title-font);
  font-size: 1.4rem;
  font-weight: 400;
}

#codex-body .back + h3 {
  margin-top: 1.2rem;
}

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

#codex-body p {
  margin: 0;
}

#codex-body .kind {
  color: var(--faint);
  font-style: italic;
}

#codex-body .link {
  font-style: italic;
}

/* Ambiances : une couche teintée au-dessus de la page, en multiply pour garder le texte net. */

#ambience {
  position: fixed;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: var(--blend);
  transition: opacity 1.4s ease;
}

#ambience.leaving {
  opacity: 0;
  transition-duration: var(--leave);
}

/* À la défaite, l'ambiance s'éteint lentement. */
#ambience.extinct {
  opacity: 0;
  transition-duration: 6s;
}

/* Les ambiances qui couvrent toute la page s'atténuent derrière la colonne de texte, et restent pleines dans les marges. */
@media (min-width: 50rem) {
  [data-mood="rain"],
  [data-mood="snow"],
  [data-mood="stars"],
  [data-mood="glitch"] {
    mask-image: linear-gradient(
      90deg,
      #000 calc(50% - var(--measure) / 2 - 3rem),
      rgba(0, 0, 0, 0.4) calc(50% - var(--measure) / 2),
      rgba(0, 0, 0, 0.4) calc(50% + var(--measure) / 2),
      #000 calc(50% + var(--measure) / 2 + 3rem)
    );
  }
}

#ambience::before,
#ambience::after {
  content: "";
  position: absolute;
}

/* Prologue du phare : la tour de granit et sa porte entrouverte, éclairée par la lampe */
[data-mood="tower"]::before {
  right: 8%;
  bottom: 0;
  width: clamp(80px, 14vw, 130px);
  height: 62svh;
  background: linear-gradient(rgba(var(--sea), 0.22), rgba(var(--sea), 0.35));
  clip-path: polygon(38% 0, 62% 0, 62% 9%, 84% 9%, 84% 12%, 74% 12%, 90% 100%, 10% 100%, 26% 12%, 16% 12%, 16% 9%, 38% 9%);
}

[data-mood="tower"]::after {
  right: calc(8% + clamp(80px, 14vw, 130px) * 0.4);
  bottom: 0;
  width: calc(clamp(80px, 14vw, 130px) * 0.2);
  height: 11svh;
  border-radius: 40% 40% 0 0;
  background: rgba(var(--flame), 0.6);
  animation: flicker 5.3s linear infinite;
}

/* Flamme : une lueur chaude qui vacille irrégulièrement */
[data-mood="flame"]::before {
  display: block;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(var(--flame), 0.51), transparent 62%);
  animation: flicker 5.3s linear infinite;
}

@keyframes flicker {
  0%,
  100% {
    opacity: 0.8;
  }
  11% {
    opacity: 0.62;
  }
  19% {
    opacity: 0.9;
  }
  34% {
    opacity: 0.7;
  }
  41% {
    opacity: 1;
  }
  58% {
    opacity: 0.66;
  }
  72% {
    opacity: 0.92;
  }
  86% {
    opacity: 0.72;
  }
}

/* Dénouement : le faisceau du phare rallumé, qui balaie la page */
[data-mood="light"]::before {
  display: block;
  top: -120vmax;
  left: calc(50% - 120vmax);
  width: 240vmax;
  height: 240vmax;
  background: conic-gradient(
    transparent 0deg,
    rgba(var(--sea), 0.17) 7deg,
    rgba(var(--sea), 0.27) 12deg,
    rgba(var(--sea), 0.17) 17deg,
    transparent 24deg
  );
  filter: blur(10px);
  animation: sweep 18s linear infinite;
}

@keyframes sweep {
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(450deg);
  }
}

/* Falaise : le feu du navire qui monte et descend avec la houle, au-dessus d'une mer à peine teintée */
[data-mood="horizon"]::before {
  right: 0;
  bottom: 0;
  left: 0;
  height: 28%;
  background: linear-gradient(transparent, rgba(var(--sea), 0.17));
}

[data-mood="horizon"]::after {
  top: 74svh;
  left: 76%;
  width: 36px;
  height: 36px;
  background: radial-gradient(
    circle,
    rgba(var(--flame), 1) 0 2px,
    rgba(var(--flame), 0.37) 4px,
    transparent 70%
  );
  animation: bob 5s ease-in-out infinite alternate;
}

@keyframes bob {
  from {
    opacity: 0.55;
    transform: translate(-6px, 5px);
  }
  to {
    opacity: 1;
    transform: translate(6px, -5px);
  }
}

/* Trappe : le panneau de bois et son anneau de fer */
[data-mood="trapdoor"]::before {
  right: 7%;
  bottom: 15svh;
  width: 170px;
  height: 120px;
  border: 2px solid rgba(var(--sea), 0.45);
  background: repeating-linear-gradient(90deg, rgba(var(--sea), 0.1) 0 26px, rgba(var(--sea), 0.35) 26px 28px);
}

[data-mood="trapdoor"]::after {
  right: calc(7% + 70px);
  bottom: calc(15svh + 46px);
  width: 30px;
  height: 30px;
  border: 3px solid rgba(var(--sea), 0.6);
  border-radius: 50%;
}

/* Lanterne : le cercle de poussière laissé par la lentille disparue */
[data-mood="ring"]::before {
  right: 8%;
  bottom: 15svh;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 58%, rgba(var(--sea), 0.4) 62% 67%, transparent 71%);
}

[data-mood="ring"]::after {
  right: calc(8% + 36px);
  bottom: calc(15svh + 36px);
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background-image: radial-gradient(circle 1.5px, rgba(var(--sea), 0.45), transparent);
  background-size: 14px 14px;
}

/* Chapelle : le vitrail en ogive et son meneau */
[data-mood="ogive"]::before {
  right: 8%;
  bottom: 14svh;
  width: 130px;
  height: 230px;
  background:
    linear-gradient(90deg, transparent 48%, rgba(var(--sea), 0.35) 48% 52%, transparent 52%),
    linear-gradient(rgba(var(--flame), 0.5), rgba(var(--flame), 0.14));
  clip-path: polygon(50% 0, 68% 8%, 84% 20%, 95% 34%, 100% 48%, 100% 100%, 0 100%, 0 48%, 5% 34%, 16% 20%, 32% 8%);
}

/* Grotte : une eau sombre qui monte et descend en bas de page */
[data-mood="tide"]::before,
[data-mood="tide"]::after {
  display: block;
  top: calc(100% - 20svh);
  left: calc(50% - 110vmax);
  width: 220vmax;
  height: 220vmax;
  border-radius: 44%;
  background: rgba(var(--sea), 0.09);
  filter: blur(6px);
  animation: swell 32s linear infinite;
}

[data-mood="tide"]::after {
  top: calc(100% - 16svh);
  border-radius: 42%;
  background: rgba(var(--sea), 0.09);
  animation-duration: 45s;
  animation-direction: reverse;
}

@keyframes swell {
  to {
    transform: rotate(360deg);
  }
}

/* Dénouement : le faisceau, avec une lueur qui respire */
[data-mood="light"]::after {
  display: block;
  inset: 0;
  background: radial-gradient(circle at 50% 0, rgba(var(--flame), 0.54), transparent 58%);
  animation: breathe 7s ease-in-out infinite alternate;
}

@keyframes breathe {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}

/* Neige : deux couches de flocons très lents. Le décalage égale la taille du motif, pour boucler sans saut. */
[data-mood="snow"]::before,
[data-mood="snow"]::after {
  inset: -320px 0 0;
  background-image:
    radial-gradient(circle 2.25px at 40px 60px, rgba(var(--sea), 0.68), transparent),
    radial-gradient(circle 1.5px at 130px 210px, rgba(var(--sea), 0.68), transparent),
    radial-gradient(circle 3px at 230px 120px, rgba(var(--sea), 0.51), transparent),
    radial-gradient(circle 1.5px at 290px 280px, rgba(var(--sea), 0.68), transparent);
  background-size: 320px 320px;
  animation: snowfall 28s linear infinite;
}

[data-mood="snow"]::after {
  background-position: 110px 70px;
  animation-duration: 42s;
}

@keyframes snowfall {
  to {
    transform: translateY(320px);
  }
}

/* Cuisines : quelques braises qui montent du bas de la page et s'éteignent en route */
#ambience[data-mood="embers"] {
  mask-image: linear-gradient(transparent 35%, #000 90%);
}

[data-mood="embers"]::before {
  inset: 0 0 -420px;
  background-image:
    radial-gradient(circle 2.25px at 70px 90px, rgba(var(--flame), 1), transparent),
    radial-gradient(circle 1.5px at 210px 300px, rgba(var(--flame), 1), transparent),
    radial-gradient(circle 3px at 340px 180px, rgba(var(--flame), 1), transparent);
  background-size: 420px 420px;
  animation: rising 22s linear infinite;
}

[data-mood="embers"]::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 30%;
  background: linear-gradient(transparent, rgba(var(--flame), 0.27));
  animation: breathe 6s ease-in-out infinite alternate;
}

@keyframes rising {
  to {
    transform: translateY(-420px);
  }
}

/* Herbier : un bouquet de simples suspendu à sécher */
[data-mood="herbs"]::before,
[data-mood="herbs"]::after {
  top: 0;
  right: 6%;
  width: 100px;
  height: 215px;
  background:
    radial-gradient(ellipse 11px 6px at 38px 44px, rgba(var(--sea), 0.42) 96%, transparent),
    radial-gradient(ellipse 11px 6px at 62px 68px, rgba(var(--sea), 0.42) 96%, transparent),
    radial-gradient(ellipse 11px 6px at 38px 92px, rgba(var(--sea), 0.42) 96%, transparent),
    radial-gradient(ellipse 11px 6px at 62px 116px, rgba(var(--sea), 0.42) 96%, transparent),
    radial-gradient(ellipse 11px 6px at 38px 140px, rgba(var(--sea), 0.42) 96%, transparent),
    radial-gradient(ellipse 11px 6px at 62px 164px, rgba(var(--sea), 0.42) 96%, transparent),
    radial-gradient(ellipse 11px 6px at 38px 188px, rgba(var(--sea), 0.42) 96%, transparent),
    linear-gradient(rgba(var(--sea), 0.5), rgba(var(--sea), 0.5)) 50px 0 / 1.5px 100% no-repeat;
}

[data-mood="herbs"]::after {
  right: calc(6% + 58px);
  transform: scale(0.75);
  transform-origin: top;
}

/* Chemin de ronde : la lune au-dessus des créneaux */
[data-mood="moon"]::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 17svh;
  background:
    repeating-linear-gradient(90deg, rgba(var(--sea), 0.2) 0 48px, transparent 48px 84px) top / 100% 28px no-repeat,
    linear-gradient(rgba(var(--sea), 0.2), rgba(var(--sea), 0.2)) 0 28px / 100% 100% no-repeat;
}

[data-mood="moon"]::before {
  top: 6svh;
  right: 8%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(var(--sea), 0.34) 0 44px, rgba(var(--sea), 0.14) 46px, transparent 70%);
}

/* Grande salle : le fragment de comptes brûlé, posé devant la comtesse */
[data-mood="fragment"]::before {
  right: 7%;
  bottom: 15svh;
  width: 180px;
  height: 130px;
  background:
    radial-gradient(circle at 100% 0, rgba(var(--wine), 0.55), transparent 42%),
    radial-gradient(circle at 0 100%, rgba(var(--wine), 0.4), transparent 34%),
    repeating-linear-gradient(transparent 0 15px, rgba(var(--wine), 0.3) 15px 16.5px),
    rgba(var(--flame), 0.2);
  clip-path: polygon(3% 8%, 22% 3%, 40% 7%, 63% 1%, 78% 9%, 92% 6%, 98% 34%, 94% 57%, 99% 82%, 79% 96%, 57% 91%, 33% 98%, 12% 92%, 1% 62%, 5% 35%);
  transform: rotate(-6deg);
}

/* Passerelle de l'Orsanne : les étoiles qui glissent par la baie. Le décalage égale la taille du motif. */
[data-mood="stars"]::before,
[data-mood="stars"]::after {
  inset: 0 -360px 0 0;
  background-image:
    radial-gradient(circle 1.5px at 50px 80px, rgba(var(--sea), 0.7), transparent),
    radial-gradient(circle 1px at 150px 250px, rgba(var(--sea), 0.7), transparent),
    radial-gradient(circle 2px at 260px 40px, rgba(var(--sea), 0.6), transparent),
    radial-gradient(circle 1px at 320px 180px, rgba(var(--sea), 0.7), transparent);
  background-size: 360px 300px;
  animation: drift 90s linear infinite;
}

[data-mood="stars"]::after {
  background-position: 130px 110px;
  animation-duration: 140s;
}

@keyframes drift {
  to {
    transform: translateX(-360px);
  }
}

/* Salle des dormeurs : les rangées de capsules, et celle de la commandante, vide, au voyant orange */
[data-mood="capsules"]::before {
  top: 0;
  right: 5%;
  bottom: 0;
  width: 128px;
  background: radial-gradient(ellipse 26px 11px, rgba(var(--sea), 0.35) 96%, transparent) 0 0 / 64px 38px;
  mask:
    linear-gradient(#000 0 0) left / 64px 100% no-repeat,
    linear-gradient(#000 266px, transparent 266px 304px, #000 304px) right / 64px 100% no-repeat;
}

[data-mood="capsules"]::after {
  top: 266px;
  right: 5%;
  width: 64px;
  height: 38px;
  background: radial-gradient(ellipse 26px 11px, rgba(var(--flame), 0.7) 96%, transparent);
  animation: breathe 5s ease-in-out infinite alternate;
}

/* Signal : l'émission qui vient de Vespère, en ondes qui s'élargissent depuis un point */
[data-mood="signal"]::before {
  right: calc(8% + 88px);
  bottom: calc(15svh + 88px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--sea), 0.6);
}

[data-mood="signal"]::after {
  right: 8%;
  bottom: 15svh;
  width: 184px;
  height: 184px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 21px, rgba(var(--sea), 0.45) 21px 23px);
  animation: emit 7s ease-out infinite;
}

@keyframes emit {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  30% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(1);
  }
}

/* La Couronne : l'anneau de pierre sombre, vu de biais, qui masque les étoiles */
[data-mood="gate"]::before {
  top: 50%;
  right: 5%;
  width: 150px;
  height: 340px;
  border: 13px solid rgba(var(--sea), 0.35);
  border-radius: 50%;
  transform: translateY(-50%) rotate(8deg);
}

[data-mood="gate"]::after {
  top: 50%;
  right: 5%;
  width: 150px;
  height: 340px;
  border-radius: 50%;
  background-image: radial-gradient(circle 1.5px, rgba(var(--sea), 0.5), transparent);
  background-size: 34px 42px;
  transform: translateY(-50%) rotate(8deg) scale(0.8);
}

/* Flotte : les vaisseaux du Directoire en formation, qui gagnent lentement du terrain */
[data-mood="fleet"]::before {
  top: 7svh;
  right: 4%;
  width: 230px;
  height: 130px;
  background: rgba(var(--sea), 0.4);
  clip-path: polygon(
    50% 76%, 44% 100%, 56% 100%, 50% 76%,
    30% 40%, 24% 64%, 36% 64%, 30% 40%, 50% 76%,
    70% 40%, 64% 64%, 76% 64%, 70% 40%, 50% 76%,
    10% 4%, 4% 28%, 16% 28%, 10% 4%, 50% 76%,
    50% 4%, 44% 28%, 56% 28%, 50% 4%, 50% 76%,
    90% 4%, 84% 28%, 96% 28%, 90% 4%, 50% 76%
  );
  animation: pursue 40s ease-in-out infinite alternate;
}

@keyframes pursue {
  from {
    transform: translateY(-8px);
  }
  to {
    transform: translateY(26px);
  }
}

/* Réacteur : le grand cœur orange qui tourne derrière sa vitre */
[data-mood="core"]::before {
  right: 7%;
  bottom: 15svh;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--flame), 0.65) 0 30%, rgba(var(--flame), 0.2) 62%, transparent 72%);
  animation: breathe 6s ease-in-out infinite alternate;
}

[data-mood="core"]::after {
  right: 7%;
  bottom: 15svh;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(var(--sea), 0.4) 0 7deg, transparent 7deg 45deg);
  mask: radial-gradient(circle, transparent 58%, #000 59% 70%, transparent 71%);
  animation: swell 50s linear infinite;
}

/* Dénouement : l'étoile jeune qui se lève, au-dessus de la courbe de nuages */
[data-mood="sunrise"]::before {
  top: calc(100% - 22svh);
  left: calc(50% - 110vmax);
  width: 220vmax;
  height: 220vmax;
  border-radius: 50%;
  background: rgba(var(--sea), 0.1);
}

[data-mood="sunrise"]::after {
  inset: 0;
  background: radial-gradient(ellipse 90% 55% at 50% 84%, rgba(var(--flame), 0.5), transparent);
  animation: breathe 9s ease-in-out infinite alternate;
}

/* Pluie acide : des filets obliques qui tombent des grilles de la Dalle */
[data-mood="rain"]::before,
[data-mood="rain"]::after {
  inset: -30%;
  background: repeating-linear-gradient(90deg, transparent 0 89px, rgba(var(--sea), 0.28) 89px 90px);
  mask: repeating-linear-gradient(transparent 0 130px, #000 130px 180px);
  --tilt: rotate(12deg);
  animation: fall 3.2s linear infinite;
}

[data-mood="rain"]::after {
  background: repeating-linear-gradient(90deg, transparent 0 139px, rgba(var(--sea), 0.18) 139px 140px);
  mask: repeating-linear-gradient(transparent 0 200px, #000 200px 260px);
  --drop: 260px;
  animation-duration: 6.1s;
}

@keyframes fall {
  from {
    transform: var(--tilt) translateY(0);
  }
  to {
    transform: var(--tilt) translateY(var(--drop, 180px));
  }
}

/* Néon : l'enseigne verticale du Court-Circuit, les colonnes de l'atrium, qui grésillent */
[data-mood="neon"]::before,
[data-mood="neon"]::after {
  top: 10svh;
  right: 4%;
  width: 7px;
  height: 52svh;
  border-radius: 4px;
  background: rgba(var(--flame), 0.5);
  box-shadow: 0 0 22px 5px rgba(var(--flame), 0.3);
  animation: flicker 6.7s linear infinite;
}

[data-mood="neon"]::after {
  top: 22svh;
  right: calc(4% + 22px);
  height: 30svh;
  background: rgba(var(--sea), 0.5);
  box-shadow: 0 0 22px 5px rgba(var(--sea), 0.3);
  animation-duration: 9.1s;
}

/* Clinique : la grande lampe ronde au-dessus de la table d'opération, et sa lumière froide */
[data-mood="surgery"]::before {
  top: 2svh;
  left: calc(50% - 110px);
  width: 220px;
  height: 26px;
  border-radius: 50%;
  background: rgba(var(--sea), 0.5);
}

[data-mood="surgery"]::after {
  inset: 0;
  background: radial-gradient(ellipse 45% 70% at 50% 0, rgba(var(--sea), 0.16), transparent);
}

/* Parvis : les tours de la ville, et la tour Hélion aux fenêtres allumées */
[data-mood="skyline"]::before {
  right: 0;
  bottom: 0;
  left: 0;
  height: 34svh;
  background: rgba(var(--sea), 0.2);
  clip-path: polygon(0 100%, 0 62%, 7% 62%, 7% 40%, 15% 40%, 15% 70%, 24% 70%, 24% 50%, 31% 50%, 31% 78%, 42% 78%, 42% 60%, 50% 60%, 50% 82%, 62% 82%, 62% 55%, 70% 55%, 70% 72%, 76% 72%, 76% 100%, 92% 100%, 92% 66%, 100% 66%, 100% 100%);
}

[data-mood="skyline"]::after {
  right: 11%;
  bottom: 0;
  width: clamp(56px, 10vw, 90px);
  height: 62svh;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(var(--flame), 0.35) 6px 12px, transparent 12px 16px),
    rgba(var(--sea), 0.14);
  mask: repeating-linear-gradient(#000 0 8px, rgba(0, 0, 0, 0.35) 8px 16px);
}

/* Réseau : le sol quadrillé sans fin, sous l'horizon rose */
[data-mood="grid"]::before {
  right: -60%;
  bottom: 0;
  left: -60%;
  height: 70svh;
  background:
    repeating-linear-gradient(90deg, rgba(var(--sea), 0.45) 0 2px, transparent 2px 72px),
    repeating-linear-gradient(rgba(var(--sea), 0.45) 0 2px, transparent 2px 72px);
  mask: linear-gradient(transparent, #000 40%);
  transform: perspective(520px) rotateX(58deg);
  transform-origin: bottom;
}

[data-mood="grid"]::after {
  right: 0;
  bottom: 27svh;
  left: 0;
  height: 2px;
  background: rgba(var(--flame), 0.45);
  box-shadow: 0 0 34px 8px rgba(var(--flame), 0.22);
}

/* Chemin de Traverse : les toits biscornus des boutiques et leurs cheminées de travers */
[data-mood="rooftops"]::before {
  right: 0;
  bottom: 0;
  left: 0;
  height: 30svh;
  background: rgba(var(--sea), 0.22);
  clip-path: polygon(0 100%, 0 58%, 5% 34%, 11% 60%, 13% 60%, 13% 42%, 15% 42%, 15% 62%, 22% 66%, 27% 26%, 34% 68%, 41% 50%, 43% 50%, 44% 30%, 46% 31%, 46% 54%, 52% 70%, 58% 44%, 63% 20%, 68% 62%, 74% 70%, 79% 36%, 81% 37%, 81% 48%, 86% 28%, 92% 64%, 96% 44%, 100% 58%, 100% 100%);
}

/* Caveau : de part et d'autre, les baies de stockage et leurs milliers de diodes qui respirent */
[data-mood="vault"]::before,
[data-mood="vault"]::after {
  top: 0;
  bottom: 0;
  left: 2%;
  width: clamp(26px, 9vw, 120px);
  background: radial-gradient(circle, rgba(var(--sea), 0.5) 0 2px, transparent 3px) 0 0 / 20px 20px;
  animation: breathe 11s ease-in-out infinite alternate;
}

[data-mood="vault"]::after {
  right: 2%;
  left: auto;
  animation-delay: -5s;
}

/* Effacement : une conscience qui se superpose à l'autre, en lignes de balayage et en bande qui dérive */
[data-mood="glitch"]::before {
  inset: 0;
  background: repeating-linear-gradient(transparent 0 3px, rgba(var(--sea), 0.09) 3px 4px);
}

[data-mood="glitch"]::after {
  top: 14svh;
  right: 0;
  left: 0;
  height: 12svh;
  background: linear-gradient(transparent, rgba(var(--flame), 0.22), transparent);
  animation: drift-band 13s ease-in-out infinite alternate;
}

@keyframes drift-band {
  to {
    transform: translateY(66svh);
  }
}

/* Ligne plate : le tracé droit du moniteur, et le point qui le parcourt */
[data-mood="flatline"]::before {
  right: 0;
  bottom: 14svh;
  left: 0;
  height: 2px;
  background: rgba(var(--flame), 0.45);
}

[data-mood="flatline"]::after {
  bottom: calc(14svh - 3px);
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--flame), 0.5);
  box-shadow: 0 0 14px 4px rgba(var(--flame), 0.3);
  animation: trace 9s linear infinite;
}

@keyframes trace {
  to {
    transform: translateX(100vw);
  }
}

/* Grande Salle : le paravent géant qui cache l'estrade et les morts */
[data-mood="paravent"]::before {
  right: 6%;
  bottom: 14svh;
  width: 160px;
  height: 310px;
  background: repeating-linear-gradient(90deg, rgba(var(--sea), 0.34) 0 24%, rgba(var(--sea), 0.14) 24% 25%);
  clip-path: polygon(0 7%, 25% 0, 50% 7%, 75% 0, 100% 7%, 100% 100%, 0 100%);
}

/* Cheminette : les flammes vertes de l'âtre, qui retombent derrière toi */
[data-mood="floo"]::before {
  right: 8%;
  bottom: 14svh;
  width: 150px;
  height: 240px;
  background: linear-gradient(rgba(var(--floo), 0.3), rgba(var(--floo), 0.62));
  clip-path: path("M75 240 C20 240 -2 200 8 158 C15 130 30 118 28 84 C44 100 52 118 54 138 C64 98 54 52 82 0 C86 42 110 70 118 106 C121 120 122 130 120 142 C128 132 134 120 136 106 C152 140 156 182 140 212 C128 233 106 240 75 240 Z");
  transform-origin: 50% 100%;
  animation: floo-lick 6s ease-in-out infinite alternate;
}

[data-mood="floo"]::after {
  right: calc(8% - 30px);
  bottom: calc(14svh - 40px);
  width: 210px;
  height: 120px;
  background: radial-gradient(ellipse, rgba(var(--floo), 0.3), transparent 70%);
}

@keyframes floo-lick {
  from {
    transform: scaleY(0.94);
  }
  to {
    transform: scaleY(1.04) skewX(-1.5deg);
  }
}

/* Le Terrier : la grande horloge de la famille, ses neuf aiguilles, dont une qu'on ne regarde pas */
[data-mood="clock"]::before {
  top: 24svh;
  right: 7%;
  width: 180px;
  height: 180px;
  border: 3px solid rgba(var(--sea), 0.42);
  border-radius: 50%;
}

[data-mood="clock"]::after {
  top: 24svh;
  right: 7%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: conic-gradient(
    transparent 0 18deg,
    rgba(var(--sea), 0.5) 18deg 20deg,
    transparent 20deg 62deg,
    rgba(var(--sea), 0.5) 62deg 64deg,
    transparent 64deg 66deg,
    rgba(var(--sea), 0.5) 66deg 68deg,
    transparent 68deg 118deg,
    rgba(var(--flame), 0.7) 118deg 121deg,
    transparent 121deg 168deg,
    rgba(var(--sea), 0.5) 168deg 170deg,
    transparent 170deg 214deg,
    rgba(var(--sea), 0.5) 214deg 216deg,
    transparent 216deg 262deg,
    rgba(var(--sea), 0.5) 262deg 264deg,
    transparent 264deg 306deg,
    rgba(var(--sea), 0.5) 306deg 308deg,
    transparent 308deg 340deg,
    rgba(var(--sea), 0.5) 340deg 342deg,
    transparent 342deg
  );
  mask-image: radial-gradient(circle, #000 66%, transparent 67%);
}

/* Jardin : la branche basse du vieux pommier, en fleur en ce début de mai */
[data-mood="appletree"]::before {
  top: 0;
  right: 0;
  width: 280px;
  height: 300px;
  background: rgba(var(--sea), 0.34);
  clip-path: polygon(100% 0, 100% 12%, 74% 26%, 52% 50%, 50% 49%, 66% 28%, 40% 34%, 18% 30%, 18% 28%, 42% 30%, 72% 19%, 88% 0);
}

[data-mood="appletree"]::after {
  top: 0;
  right: 0;
  width: 280px;
  height: 300px;
  background:
    radial-gradient(circle 9px at 18% 32%, rgba(var(--flame), 0.5) 96%, transparent),
    radial-gradient(circle 7px at 28% 27%, rgba(var(--flame), 0.42) 96%, transparent),
    radial-gradient(circle 8px at 40% 37%, rgba(var(--flame), 0.5) 96%, transparent),
    radial-gradient(circle 7px at 50% 53%, rgba(var(--flame), 0.5) 96%, transparent),
    radial-gradient(circle 9px at 57% 42%, rgba(var(--flame), 0.42) 96%, transparent),
    radial-gradient(circle 7px at 66% 30%, rgba(var(--flame), 0.5) 96%, transparent),
    radial-gradient(circle 8px at 80% 27%, rgba(var(--flame), 0.42) 96%, transparent),
    radial-gradient(circle 7px at 92% 17%, rgba(var(--flame), 0.5) 96%, transparent);
}

/* Le linge : la corde tendue et les draps derrière lesquels on t'entend */
[data-mood="washing"]::before {
  top: 18svh;
  right: 0;
  width: 32%;
  height: 2px;
  background: rgba(var(--sea), 0.5);
}

[data-mood="washing"]::after {
  top: 18svh;
  right: 3%;
  width: 190px;
  height: 250px;
  background:
    linear-gradient(90deg, rgba(var(--sea), 0.24) 0 56%, transparent 56% 62%, rgba(var(--flame), 0.2) 62%);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 82% 58%, 62% 62%, 62% 100%, 42% 94%, 22% 100%, 0 95%);
}

/* La radio : le vieux poste sur le buffet, et Potterveille qui en sort */
[data-mood="radio"]::before {
  right: 8%;
  bottom: 15svh;
  width: 140px;
  height: 160px;
  border-radius: 70px 70px 8px 8px;
  background:
    radial-gradient(circle 11px at 50% 84%, rgba(var(--flame), 0.55) 96%, transparent),
    repeating-linear-gradient(90deg, rgba(var(--sea), 0.3) 0 4px, rgba(var(--sea), 0.14) 4px 10px);
}

[data-mood="radio"]::after {
  right: calc(8% - 22px);
  bottom: calc(15svh + 70px);
  width: 184px;
  height: 184px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 21px, rgba(var(--flame), 0.42) 21px 23px);
  animation: emit 7s ease-out infinite;
}

/* Le lac : le dais de toile dressé sur la berge, et l'eau au pied des autels */
[data-mood="dais"]::before {
  right: 3%;
  bottom: 13svh;
  width: 190px;
  height: 250px;
  background: linear-gradient(rgba(var(--sea), 0.34), rgba(var(--sea), 0.18));
  clip-path: polygon(50% 0, 100% 34%, 95% 37%, 95% 100%, 90% 100%, 90% 38%, 70% 44%, 50% 38%, 30% 44%, 10% 38%, 10% 100%, 5% 100%, 5% 37%, 0 34%);
}

[data-mood="dais"]::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 16svh;
  background: linear-gradient(transparent, rgba(var(--sea), 0.14));
}

/* Le cimetière de Loutry-Ste-Chaspoule : une rangée de tombes au bas de la page */
[data-mood="headstones"]::before {
  right: 0;
  bottom: calc(13svh - 30px);
  left: 0;
  height: 30px;
  background: radial-gradient(ellipse 34px 30px at 65px 30px, rgba(var(--sea), 0.26) 97%, transparent) 0 0 / 130px 100% repeat-x;
}

[data-mood="headstones"]::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(13svh - 30px);
  background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(var(--sea), 0.26) 31px 99px, transparent 99px 130px);
}

/* La revue de presse : La Gazette dépliée sur la table */
[data-mood="gazette"]::before {
  top: 22svh;
  right: 6%;
  width: 180px;
  height: 250px;
  border: 2px solid rgba(var(--sea), 0.42);
  background:
    linear-gradient(rgba(var(--sea), 0.42), rgba(var(--sea), 0.42)) 50% 18px / 80% 16px no-repeat,
    linear-gradient(rgba(var(--flame), 0.32), rgba(var(--flame), 0.32)) 18px 50px / 62px 62px no-repeat,
    repeating-linear-gradient(rgba(var(--sea), 0.28) 0 2px, transparent 2px 10px) 50% 100% / 80% 62% no-repeat;
  transform: rotate(-5deg);
}

/* La fin au perron : le soleil bas, et la colline derrière le verger */
[data-mood="dusk"]::before {
  top: calc(100% - 24svh);
  left: calc(50% - 110vmax);
  width: 220vmax;
  height: 220vmax;
  border-radius: 50%;
  background: rgba(var(--sea), 0.16);
}

[data-mood="dusk"]::after {
  right: 11%;
  bottom: calc(24svh - 34px);
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--flame), 0.55) 0 38px, rgba(var(--flame), 0.18) 40px, transparent 70%);
}

/* La fin distante : la lune qui monte, seule, au-dessus du verger */
[data-mood="moonrise"]::before {
  top: 7svh;
  right: 8%;
  width: 170px;
  height: 170px;
  background: radial-gradient(circle, rgba(var(--sea), 0.36) 0 46px, rgba(var(--sea), 0.12) 48px, transparent 70%);
}

/* La baguette de l'Aîné : le bois de sureau noueux, chaud dans ta main */
[data-mood="elder"]::before {
  right: 12%;
  bottom: 14svh;
  width: 20px;
  height: 320px;
  background: linear-gradient(rgba(var(--sea), 0.3), rgba(var(--sea), 0.5));
  clip-path: polygon(44% 0, 60% 0, 64% 16%, 80% 19%, 66% 24%, 70% 44%, 92% 48%, 72% 54%, 78% 74%, 100% 78%, 82% 84%, 90% 100%, 12% 100%, 22% 82%, 2% 76%, 26% 70%, 30% 48%, 12% 42%, 34% 38%, 38% 18%, 24% 14%, 40% 11%);
  transform: rotate(16deg);
}

[data-mood="elder"]::after {
  right: calc(12% - 80px);
  bottom: calc(14svh + 268px);
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, rgba(var(--flame), 0.55), transparent 68%);
}

/* Sans marge et avec un long passage, ces décors se replient dans le blanc au-dessus du titre. */
@media (max-width: 50rem) {
  [data-mood="neon"]::before,
  [data-mood="neon"]::after {
    top: 8px;
    height: 84px;
  }

  [data-mood="neon"]::before {
    right: 5%;
  }

  [data-mood="surgery"]::before {
    left: calc(50% - 70px);
    width: 140px;
  }

  [data-mood="skyline"]::before {
    height: 12svh;
  }

  [data-mood="rooftops"]::before {
    height: 12svh;
  }

  [data-mood="skyline"]::after {
    top: 0;
    bottom: auto;
    width: 44px;
    height: 104px;
  }

  [data-mood="grid"]::before {
    top: -40px;
    bottom: auto;
    height: 150px;
  }

  [data-mood="grid"]::after {
    top: 44px;
    bottom: auto;
  }

  [data-mood="flatline"]::before {
    bottom: 3svh;
  }

  [data-mood="flatline"]::after {
    bottom: calc(3svh - 3px);
  }

  [data-mood="capsules"]::before {
    bottom: auto;
    height: 114px;
    mask:
      linear-gradient(#000 0 0) left / 64px 100% no-repeat,
      linear-gradient(#000 38px, transparent 38px 76px, #000 76px) right / 64px 100% no-repeat;
  }

  [data-mood="capsules"]::after {
    top: 38px;
  }

  [data-mood="signal"]::before {
    top: 50px;
    right: calc(5% + 46px);
    bottom: auto;
  }

  [data-mood="signal"]::after {
    top: 4px;
    right: 5%;
    bottom: auto;
    width: 100px;
    height: 100px;
    background: repeating-radial-gradient(circle, transparent 0 12px, rgba(var(--sea), 0.45) 12px 14px);
  }

  [data-mood="gate"]::before,
  [data-mood="gate"]::after {
    top: 6px;
    right: 8%;
    width: 48px;
    height: 104px;
  }

  [data-mood="gate"]::before {
    border-width: 6px;
    transform: rotate(8deg);
  }

  [data-mood="gate"]::after {
    background-size: 14px 18px;
    transform: rotate(8deg) scale(0.8);
  }

  [data-mood="fleet"]::before {
    top: 1svh;
    width: 150px;
    height: 85px;
  }

  [data-mood="core"]::before,
  [data-mood="core"]::after {
    top: 4px;
    right: 5%;
    bottom: auto;
    width: 104px;
    height: 104px;
  }
}

/* Sans marge, les décors des Survivants se replient en petit au-dessus du titre. */
@media (max-width: 50rem) {
  [data-mood="paravent"]::before,
  [data-mood="radio"]::before,
  [data-mood="gazette"]::before,
  [data-mood="elder"]::before,
  [data-mood="dais"]::before {
    top: 0;
    right: 5%;
    bottom: auto;
    width: 76px;
    height: 104px;
  }

  [data-mood="floo"]::before {
    top: 0;
    right: 5%;
    bottom: auto;
    transform: scale(0.44);
    transform-origin: 100% 0;
    animation: none;
  }

  [data-mood="gazette"]::before {
    background-size: 80% 8px, 28px 28px, 80% 62%;
    background-position: 50% 8px, 7px 22px, 50% 100%;
  }

  [data-mood="elder"]::before {
    width: 8px;
  }

  [data-mood="floo"]::after,
  [data-mood="radio"]::after,
  [data-mood="elder"]::after {
    display: none;
  }

  [data-mood="clock"]::before,
  [data-mood="clock"]::after,
  [data-mood="moonrise"]::before {
    top: 0;
    right: 5%;
    width: 92px;
    height: 92px;
  }

  [data-mood="appletree"]::before,
  [data-mood="appletree"]::after {
    width: 140px;
    height: 150px;
  }

  [data-mood="appletree"]::after {
    background-size: 100% 100%;
    transform: scale(0.98);
  }

  [data-mood="washing"]::before {
    top: 2svh;
    width: 40%;
  }

  [data-mood="washing"]::after {
    top: 2svh;
    width: 90px;
    height: 100px;
  }

  [data-mood="dais"]::after {
    height: 7svh;
  }

  [data-mood="headstones"]::before {
    bottom: calc(9svh - 30px);
  }

  [data-mood="headstones"]::after {
    height: calc(9svh - 30px);
  }

  [data-mood="dusk"]::before {
    top: calc(100% - 9svh);
  }

  [data-mood="dusk"]::after {
    top: 0;
    bottom: auto;
    right: 5%;
    width: 100px;
    height: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #book,
  #prompt {
    transition: none;
  }

  #book .fade,
  #book .illustration,
  #book .map .body div,
  #map[open],
  #codex[open],
  #ambience::before,
  #ambience::after {
    animation: none;
  }
}