/* ALEA — feuille de style unique.
 *
 * Parti pris : sombre, et assumé comme tel. Le monde est rendu sur un fond
 * presque noir pour que la végétation et les créatures ressortent ; entourer
 * cette image d'une interface claire produirait un halo qui écraserait les
 * couleurs faibles — or ce sont justement celles-là qu'on veut distinguer,
 * puisqu'un individu qui pâlit est un individu qui meurt de faim.
 *
 * La mise en page part du téléphone et s'élargit ensuite. C'est l'ordre le
 * moins coûteux : une colonne qui se dédouble tient en une règle, alors qu'une
 * grille de bureau qu'on démonte pour l'étroit en demande une par élément.
 */

:root {
  --bg: #0a0c10;
  --bg-soft: #11151b;
  --bg-card: #151a21;
  --line: #232b35;
  --text: #dfe5ec;
  --muted: #8b97a6;
  --accent: #7fd4a8;
  --accent-warm: #d4b37f;
  --danger: #e0806a;
  --radius: 10px;
  --pad: clamp(12px, 2.4vw, 20px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Empêche le rebond élastique iOS qui découvre un fond blanc sous la page. */
  overscroll-behavior: none;
}

h3, h4 { margin: 18px 0 8px; font-size: 15px; font-weight: 600; }
h4 { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); font-size: 13px; }

/* --- Bandeau --------------------------------------------------------- */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px var(--pad);
  padding: 10px var(--pad);
  padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(10, 12, 16, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 8px; font-weight: 650; letter-spacing: .06em; }
.brand em { font-style: normal; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.logo {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #b6f0d2, var(--accent) 60%, transparent);
}

.mondes {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.mondes a {
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.mondes a:hover { color: var(--text); background: var(--bg-card); }
.mondes a.on { color: var(--text); background: var(--bg-card); border-color: var(--line); }
/* Un monde dont le moteur ne tourne plus doit se voir avant qu'on clique
 * dessus, sinon on attribue au site la panne d'un seul de ses mondes. */
.mondes a.eteint { opacity: .4; }
.mondes a.eteint::after { content: ' ·arrêté'; font-size: 10px; }

.stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-inline-start: auto; font-size: 13px; color: var(--muted); }
.stats b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }

.link { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
#link {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  transition: background .3s;
}
#link.on { background: var(--accent); box-shadow: 0 0 0 3px rgb(127 212 168 / .16); }

/* --- Structure ------------------------------------------------------- */
main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pad);
  padding: var(--pad);
  padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
  align-items: start;
}

@media (min-width: 1000px) {
  main { grid-template-columns: minmax(0, 1fr) 380px; }
  aside {
    position: sticky;
    top: 62px;
    /* Le panneau défile pour son propre compte : sans hauteur bornée, une
     * chronique de soixante entrées allongerait la page et le monde
     * disparaîtrait vers le haut dès qu'on la lit. */
    max-height: calc(100vh - 84px);
    display: flex;
    flex-direction: column;
  }
}

/* --- Scène ----------------------------------------------------------- */
.scene-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Sur un écran large et bas, l'image ne doit pas déborder sous la ligne de
   * flottaison : on la plafonne à la hauteur utile de la fenêtre. */
  max-height: calc(100vh - 210px);
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #07090c;
}

#scene {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  /* Le geste vertical doit zoomer/déplacer le monde, pas faire défiler la
   * page : sans cela, impossible de se déplacer dans la carte au doigt. */
  touch-action: none;
}
#scene.arming { cursor: crosshair; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

button {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .05s;
  /* Cible tactile confortable : sous 40 px, un pouce rate une fois sur trois. */
  min-height: 40px;
}
button:hover { border-color: #38455a; background: #1a2029; }
button:active { transform: translateY(1px); }
button.ghost { background: transparent; color: var(--muted); }
button.link {
  background: none; border: none; padding: 2px 6px; min-height: 0;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
button.link:hover { text-decoration: underline; background: none; }

.hint, .intro { color: var(--muted); font-size: 13px; margin-top: 10px; }
.intro { max-width: 68ch; border-left: 2px solid var(--line); padding-left: 12px; }

.segment {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 3px 3px 10px;
  background: var(--bg-card);
}
.segment > span { font-size: 12px; color: var(--muted); margin-right: 6px; }
.segment button {
  min-height: 30px;
  padding: 4px 10px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  border-radius: 6px;
}
.segment button:hover { background: #1a2029; border: none; }
.segment button.on { background: #1e2732; color: var(--accent); border: none; }

#legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 12.5px;
}
.leg {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 3px 0;
  min-height: 0;
}
.leg:hover { color: var(--text); background: none; }
.leg i {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto;
}
.leg b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.leg.eteinte { opacity: .45; text-decoration: line-through; }

button.on { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: .38; cursor: default; }
button:disabled:hover { border-color: var(--line); background: var(--bg-card); }
button.ghost:disabled:hover { background: transparent; }

.portraits { display: flex; gap: 10px; margin: 10px 0 6px; flex-wrap: wrap; }
.portrait { margin: 0; }
.portrait canvas {
  display: block;
  width: 116px; height: 74px;
  background: #0b0e13;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.portrait figcaption {
  font-size: 11px; color: var(--muted); text-align: center; margin-top: 3px;
}

.species header .pastille {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; margin-right: 7px; vertical-align: baseline;
}

/* --- Panneaux -------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  /* Quatre onglets tiennent tout juste sur un écran de 320 px : on autorise
   * le défilement horizontal plutôt que de les laisser se replier en deux
   * lignes bancales. */
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  padding: 10px 12px;
}
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }

.panel { display: none; padding-top: 4px; }
.panel.active { display: block; }
@media (min-width: 1000px) {
  .panel.active { overflow-y: auto; flex: 1; padding-right: 4px; }
}

/* --- Chronique ------------------------------------------------------- */
.event {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 3px;
}
.event-kind {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.event-text { margin: 0; font-size: 14px; }
.event time { font-size: 11.5px; }

.kind-extinction .event-kind, .kind-effondrement .event-kind, .kind-famine .event-kind { color: var(--danger); }
.kind-speciation .event-kind, .kind-record .event-kind, .kind-essor .event-kind { color: var(--accent); }
.kind-carnivores .event-kind, .kind-predateur .event-kind { color: var(--accent-warm); }
.kind-epidemie .event-kind { color: #c58ad4; }
.kind-altruisme .event-kind, .kind-parure .event-kind { color: #ffd479; }
.kind-cerveau .event-kind { color: #8ab4d4; }

/* --- Espèces --------------------------------------------------------- */
.species {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 13px;
  margin-bottom: 10px;
}
.species.extinct { opacity: .55; }
.species.cliquable { cursor: pointer; transition: border-color .15s; }
.species.cliquable:hover { border-color: #38455a; }
.species header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.species h3 { margin: 0; }
.badge {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.species .muted { margin: 4px 0 10px; font-size: 12px; }

.traits { display: grid; gap: 5px; }
.trait { display: grid; grid-template-columns: 74px 1fr 42px; align-items: center; gap: 8px; font-size: 11.5px; }
.trait-label { color: var(--muted); }
.trait-value { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.trait-track { height: 4px; background: #1e2530; border-radius: 3px; overflow: hidden; }
.trait-track i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* --- Arbre des lignées ----------------------------------------------- */
/* Chaque espèce occupe une ligne ; sa barre couvre la période où elle a
 * existé. Les traits verticaux relient une fille à sa mère à l'instant exact
 * de la scission. Le temps se lit de gauche à droite — c'est la seule
 * disposition où l'on voit d'un coup d'œil qui a précédé qui, et combien de
 * temps chacune a tenu. */
.arbre {
  position: relative;
  margin: 6px 0 18px;
}
.rang {
  position: relative;
  height: 30px;
}
.rang .barre {
  position: absolute;
  top: 11px;
  height: 8px;
  border-radius: 4px;
  min-width: 3px;
}
/* Une espèce éteinte s'arrête net, et cela doit se voir : la barre s'achève
 * sur un trait vertical plutôt que de s'estomper. */
.rang .fin {
  position: absolute;
  top: 6px;
  width: 2px;
  height: 18px;
  background: var(--danger);
}
.rang .etiquette {
  position: absolute;
  top: 3px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--text);
  pointer-events: none;
  text-shadow: 0 0 6px var(--bg), 0 0 3px var(--bg);
}
.rang .etiquette small { color: var(--muted); }
.lien {
  position: absolute;
  width: 1px;
  background: var(--line);
}
.axe {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 4px;
}

.musee { margin-top: 22px; }
.tombe {
  border-left: 2px solid var(--danger);
  padding: 8px 0 8px 12px;
  margin-bottom: 12px;
}
.tombe h4 { margin: 0 0 3px; color: var(--text); text-transform: none;
            letter-spacing: 0; font-size: 14px; }
.tombe p { margin: 0; font-size: 12.5px; color: var(--muted); }

/* --- Fiche ----------------------------------------------------------- */
.fiche-head { display: flex; align-items: baseline; gap: 10px; }
.fiche-head h3 { margin: 0; font-variant-numeric: tabular-nums; }
.genome { display: grid; gap: 5px; }
.gene { display: grid; grid-template-columns: 84px 1fr 54px; align-items: center; gap: 8px; font-size: 11.5px; }
.gene-name { color: var(--muted); }
.gene-value { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.gene .trait-track i { background: var(--accent-warm); }

.lineage { margin: 0; padding-left: 20px; font-size: 13px; }
.lineage li { margin: 2px 0; }
.kids { display: flex; flex-wrap: wrap; gap: 2px; }

.reseau { margin: 8px 0 4px; }
.reseau svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--bg-soft);
  border-radius: 8px;
  /* Le panneau fait 380 px de large : sous cette taille les étiquettes
   * d'entrée deviennent illisibles, et il vaut mieux laisser le lecteur faire
   * défiler que lui servir une bouillie. */
  min-width: 340px;
}
.reseau { overflow-x: auto; }

/* --- Courbes --------------------------------------------------------- */
.chart { margin: 0 0 16px; }
.chart figcaption { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.chart svg { width: 100%; height: 90px; display: block; background: var(--bg-soft); border-radius: 6px; }

/* --- Palmarès --------------------------------------------------------- */
.record {
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.record h4 { margin: 0 0 2px; color: var(--accent-warm); text-transform: none;
             letter-spacing: 0; font-size: 12px; }
.record p { margin: 0; font-size: 13px; }
.record .muted { font-size: 12px; }

/* --- Comparaison des mondes ------------------------------------------- */
.monde-carte {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 13px;
  margin-bottom: 10px;
}
.monde-carte.courant { border-color: var(--accent); }
.monde-carte header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.monde-carte h3 { margin: 0; }
.monde-carte h3 a { color: inherit; text-decoration: none; }
.monde-carte h3 a:hover { text-decoration: underline; }
.regles {
  display: flex; flex-wrap: wrap; gap: 3px 6px; margin: 8px 0 6px;
}
.regles span {
  font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; margin-top: 8px; }
.chiffre { text-align: center; }
.chiffre b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.chiffre span { font-size: 10.5px; color: var(--muted); }

.exports { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.exports a {
  font-size: 12.5px; color: var(--accent); text-decoration: none;
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px;
}
.exports a:hover { border-color: var(--accent); }

/* --- Comptes et colonies --------------------------------------------- */
form.compte { display: grid; gap: 8px; max-width: 340px; margin: 10px 0 16px; }
form.compte input, form.compte select {
  font: inherit; font-size: 13.5px;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; width: 100%;
  min-height: 40px;
}
form.compte input:focus, form.compte select:focus {
  outline: none; border-color: var(--accent);
}
form.compte label { font-size: 12px; color: var(--muted); }
.bascule { background: none; border: none; color: var(--accent); font-size: 12.5px;
           padding: 0; min-height: 0; }
.bascule:hover { text-decoration: underline; background: none; }

.colonie {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 13px; margin-bottom: 10px;
}
.colonie.morte { opacity: .6; border-color: var(--danger); }
.colonie header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.colonie h3 { margin: 0; font-size: 15px; }
.colonie .chiffres { margin-top: 10px; }

.armement {
  border: 1px dashed var(--accent); border-radius: var(--radius);
  padding: 11px 13px; margin: 10px 0; font-size: 13px;
}

/* --- Accueil ---------------------------------------------------------- */
#accueil {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(6, 8, 11, .82);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  /* Le contenu défile à l'intérieur de la boîte, pas la page derrière : sur un
   * téléphone en paysage, le texte dépasse et il faut pouvoir le lire. */
  overflow-y: auto;
}
.accueil-boite {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(18px, 4vw, 30px);
  max-width: 620px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.accueil-boite h2 {
  margin: 0 0 14px; font-size: clamp(18px, 3.4vw, 23px); line-height: 1.3;
}
.accueil-boite p { font-size: 14.5px; margin-bottom: 12px; }
.accueil-gestes {
  margin: 16px 0; padding-left: 20px;
  display: grid; gap: 8px; font-size: 13.5px; color: var(--muted);
}
.accueil-gestes b { color: var(--text); }
#accueil-fermer { margin-top: 8px; width: 100%; }

#aide {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 40px; height: 40px; padding: 0;
  border-radius: 50%;
  font-size: 17px; color: var(--muted);
  z-index: 15;
  opacity: .55;
}
#aide:hover { opacity: 1; }

/* --- Notification ---------------------------------------------------- */
#flash {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 20;
  max-width: calc(100vw - 32px);
  text-align: center;
}
#flash.show { opacity: 1; transform: translate(-50%, 0); }
#flash.bad { border-color: var(--danger); color: #f0b6a5; }

@media (max-width: 600px) {
  .hide-narrow { display: none; }
  .stats { width: 100%; margin-inline-start: 0; order: 3; }
}

/* Certains visiteurs désactivent les animations pour raisons médicales
 * (vestibulaires). On respecte le réglage système : le monde continue de
 * bouger — c'est son objet — mais l'interface autour cesse de glisser. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}