/* Génétique : les résultats rangés par composition (8 oct. 2026, soir), la meilleure plante en tête, les façons de
   l'obtenir ; la barre de calcul ; les animations (arrivée des résultats, ouverture, jardinière dans l'ordre de
   plantation), jouées une fois et coupées si le joueur préfère moins d'animations. Après tools.css. */

/* Les résultats, sans cadre autour (le titre au-dessus des cartes, comme sur la maquette) */
.gn-main > .gn-results {
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
}
.gn-results > h3 {
  font-size: 1.25rem;
}
.gn-results__others {
  margin: 8px 0 0;
  color: var(--text-soft);
  font: 700 0.85rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gn-results ol {
  gap: 8px;
}
.gn-result {
  background: linear-gradient(180deg, rgba(36, 30, 23, 0.92), rgba(22, 18, 14, 0.92));
}
/* Les gènes écrits en grand, en crème (la couleur reste sur les cases) */
.gn-word b.is-good,
.gn-word b.is-bad {
  color: var(--cream);
}
.gn-compo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 0.85rem "Roboto Condensed", sans-serif;
}
.gn-compo b {
  padding: 2px 7px;
  border: 1px solid currentColor;
}
.gn-compo b.is-good {
  color: #a7d27f;
}
.gn-compo b.is-bad {
  color: #e8907c;
}
.gn-compo i {
  color: var(--text-soft);
  font-style: normal;
}
/* La meilleure plante possible */
.gn-best {
  border: 1px solid rgba(var(--gold-rgb), 0.65);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(var(--gold-rgb), 0.14), transparent 60%),
    linear-gradient(180deg, rgba(40, 32, 22, 0.96), rgba(22, 18, 14, 0.96));
  box-shadow: 0 0 0 1px rgba(var(--shadow-rgb), 0.4), 0 10px 30px rgba(var(--shadow-rgb), 0.35);
}
.gn-best__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  background: none;
  color: var(--cream);
  text-align: left;
  cursor: pointer;
}
.gn-best__head > i {
  grid-column: 2;
  grid-row: 1;
  color: var(--text-soft);
}
.gn-best__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--value-strong);
  font: 700 0.85rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gn-best__plant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  grid-column: 1 / -1;
}
.gn-best__plant .gn-word {
  font-size: 2.4rem;
  letter-spacing: 0.12em;
}
.gn-best__head .gn-result__meta {
  grid-column: 1 / -1;
  justify-content: flex-start;
  text-align: left;
}
.gn-best__head .gn-effects {
  grid-column: 1 / -1;
}
/* Les façons d'obtenir la même plante */
.gn-variants {
  display: grid;
  gap: 6px;
  padding: 0 14px 4px;
}
.gn-best .gn-variants {
  padding: 0 18px 4px;
}
.gn-variants > p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.82rem;
}
.gn-variants > div {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.gn-variants button {
  display: grid;
  flex: none;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid rgba(var(--sheen-rgb), 0.08);
  background: rgba(var(--sheen-rgb), 0.02);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.gn-variants button .gn-word {
  font-size: 1rem;
}
.gn-variants button small {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.gn-variants button:hover {
  border-color: rgba(var(--gold-rgb), 0.5);
}
.gn-variants button.is-on {
  border-color: rgba(var(--gold-rgb), 0.8);
  background: rgba(var(--gold-rgb), 0.1);
}
/* Mes graines : le numéro sous la carte, comme sur la maquette */
.gn-mine .gn-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 2px;
}
.gn-mine .gn-list li small {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: center;
}
/* Le calcul en cours */
.gn-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  padding: 16px;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  background: rgba(var(--gold-rgb), 0.05);
}
.gn-progress > i {
  color: var(--gold);
  font-size: 1.4rem;
  animation: gn-spin 2.4s linear infinite;
}
.gn-progress p {
  margin: 0;
  color: var(--cream);
}
/* L'étape et le temps écoulé, à côté (le calcul tourne sur le PC du joueur, 26 oct. 2026) */
.gn-progress p small {
  margin-left: 6px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.gn-progress__bar {
  position: relative;
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  background: rgba(var(--sheen-rgb), 0.08);
}
.gn-progress__bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: gn-progress 1.3s ease-in-out infinite;
}
/* Les animations, jouées une fois */
.gn-results.is-arriving .gn-best,
.gn-results.is-arriving .gn-result {
  animation: gn-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.gn-results.is-arriving .gn-best__plant .gn-word b {
  animation: gn-pop 0.4s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.gn-results.is-arriving .gn-best__plant .gn-word b:nth-child(2) { animation-delay: 0.06s; }
.gn-results.is-arriving .gn-best__plant .gn-word b:nth-child(3) { animation-delay: 0.12s; }
.gn-results.is-arriving .gn-best__plant .gn-word b:nth-child(4) { animation-delay: 0.18s; }
.gn-results.is-arriving .gn-best__plant .gn-word b:nth-child(5) { animation-delay: 0.24s; }
.gn-results.is-arriving .gn-best__plant .gn-word b:nth-child(6) { animation-delay: 0.3s; }
.gn-results.is-arriving .gn-planter > span:not(.is-free),
.is-opening .gn-planter > span:not(.is-free) {
  animation: gn-plant 0.5s cubic-bezier(0.3, 1.3, 0.5, 1) both;
  animation-delay: calc(0.25s + var(--o, 0) * 0.18s);
}
.is-opening .gn-variants {
  animation: gn-rise 0.35s ease-out both;
}
.gn-mine .gn-list li,
.gn-result,
.gn-best {
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gn-result:hover {
  border-left-color: var(--gold);
}
@keyframes gn-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes gn-pop {
  from { opacity: 0; transform: scale(0.4) translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes gn-plant {
  from { opacity: 0.15; transform: scale(0.7); }
  to { opacity: 1; transform: none; }
}
@keyframes gn-progress {
  from { left: -35%; }
  to { left: 100%; }
}
@keyframes gn-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gn-results.is-arriving *,
  .gn-results.is-arriving,
  .is-opening *,
  .gn-progress > i,
  .gn-progress__bar::after {
    animation: none !important;
  }
}
@media (max-width: 760px) {
  .gn-best__plant .gn-word {
    font-size: 1.9rem;
  }
  .gn-result__head .gn-compo {
    order: 3;
  }
}
/* Animaux, d'après la maquette : l'objectif nommé dans son titre, le résultat du croisement en mots */
.lv-goal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lv-goal__pick select {
  max-width: 190px;
  padding: 4px 8px;
  font-size: 0.82rem;
}
.lv-best__label {
  color: var(--text-soft) !important;
  font-size: 0.82rem;
}
.lv-best__figures .fa-circle-info {
  color: var(--text-soft);
  cursor: help;
}
.lv-odds td:first-child {
  width: 26px;
}
.lv-odds__parents .lv-dot + .lv-dot {
  margin-left: 3px;
}
.lv-outcome {
  margin-right: 8px;
  font-weight: 700;
}
.lv-outcome.is-double {
  color: #b9e0a0;
}
.lv-outcome.is-expressed {
  color: var(--state-ok);
}
.lv-outcome.is-possible {
  color: var(--state-wait);
}
.lv-outcome.is-none {
  color: var(--text-soft);
  font-weight: 400;
}
.lv-odds td small {
  color: var(--text-soft);
}
.lv-chances {
  display: none;
}
.lv-chances p {
  margin: 0 0 6px;
  color: var(--text-soft);
  font-size: 0.82rem;
}
.lv-chances ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(var(--sheen-rgb), 0.1);
}
.lv-chances li {
  display: grid;
  text-align: center;
}
.lv-chances li span {
  padding: 4px 0;
  background: rgba(var(--shadow-rgb), 0.35);
  color: var(--cream);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
}
.lv-chances li b {
  padding: 8px 0;
  color: #fff;
  font: 700 0.95rem "Roboto Condensed", sans-serif;
}
.lv-chances li.is-high b {
  background: rgba(96, 137, 27, 0.85);
}
.lv-chances li.is-mid b {
  background: rgba(190, 125, 40, 0.85);
}
.lv-chances li.is-low b {
  background: rgba(170, 71, 52, 0.85);
}
.lv-best__foot {
  justify-content: space-between;
}
@media (max-width: 760px) {
  .lv-best .lv-scroll {
    display: none;
  }
  .lv-chances {
    display: block;
  }
  .lv-goal__pick select {
    max-width: 100%;
  }
}
.lv-odds thead th:first-child {
  display: table-cell;
}
.lv-goal__pick select {
  max-width: 260px;
}

/* ═══ La frise des croisements (8 oct., soir) : une carte par croisement, reliées par un trait, chacune avec sa
   jardinière, ce qu'il faut planter et ce qu'on fait de la plante obtenue ; le dernier mène à « Tu obtiens ». ═══ */
.gn-results__sure {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 4px;
  color: var(--state-ok);
  font-size: 0.88rem;
}
.gn-best__label .is-reached {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  color: var(--state-ok);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}
.gn-detail {
  display: grid;
  gap: 16px;
  padding: 6px 18px 18px;
}
.gn-result .gn-detail {
  padding: 6px 14px 16px;
}
.gn-crosses {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gn-crosses::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  width: 2px;
  background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.65), rgba(var(--gold-rgb), 0.15));
}
.gn-cross {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.gn-cross__n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(var(--gold-rgb), 0.75);
  border-radius: 50%;
  background: #1d1810;
  color: var(--value-strong);
  font: 800 1rem "Roboto Condensed", sans-serif;
}
.gn-cross.is-final .gn-cross__n {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--honey-ink);
  box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0.18);
}
.gn-cross__card {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(var(--sheen-rgb), 0.08);
  background: linear-gradient(180deg, rgba(var(--sheen-rgb), 0.035), rgba(var(--shadow-rgb), 0.12));
  box-shadow: 0 6px 18px rgba(var(--shadow-rgb), 0.25);
}
.gn-cross.is-final .gn-cross__card {
  border-color: rgba(var(--gold-rgb), 0.55);
  background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.08), rgba(var(--shadow-rgb), 0.12));
}
.gn-cross__card header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.gn-cross__card h5 {
  margin: 0;
  color: var(--cream);
  font: 700 1.05rem "Roboto Condensed", sans-serif;
}
.gn-cross__gets {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
  font-size: 0.85rem;
}
.gn-cross__body {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.gn-cross__plan {
  display: grid;
  gap: 6px;
}
.gn-cross__label {
  margin: 4px 0 0;
  color: var(--gold);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gn-cross__center,
.gn-cross__plants li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
}
.gn-cross__center em {
  color: var(--text);
  font-style: normal;
  font-size: 0.88rem;
}
.gn-cross__plants {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gn-cross__ref {
  min-width: 64px;
  color: var(--cream);
  font: 700 0.85rem "Roboto Condensed", sans-serif;
}
.gn-cross__tip,
.gn-cross__then {
  display: flex;
  gap: 8px;
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 0.84rem;
}
.gn-cross__tip i {
  margin-top: 3px;
  color: var(--text-soft);
}
.gn-cross__then {
  padding: 8px 10px;
  border-left: 2px solid var(--gold);
  background: rgba(var(--gold-rgb), 0.07);
  color: var(--cream);
}
.gn-cross__then i {
  margin-top: 3px;
  color: var(--gold);
}
.gn-detail__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-left: 48px;
  padding-top: 12px;
  border-top: 1px dashed rgba(var(--gold-rgb), 0.3);
}
.gn-detail__got {
  display: grid;
  justify-items: end;
  gap: 4px;
}
/* La jardinière, plus vivante : bois, terre, plantes en grand, centre lumineux */
.gn-planter {
  width: 100%;
  gap: 5px;
  padding: 9px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(var(--shadow-rgb), 0.25), transparent 12%, transparent 88%, rgba(var(--shadow-rgb), 0.25)),
    repeating-linear-gradient(0deg, #6b4c2c 0 7px, #5d4126 7px 9px);
  box-shadow: inset 0 0 0 2px #3a2614, 0 6px 16px rgba(var(--shadow-rgb), 0.4);
}
.gn-planter > span {
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--sheen-rgb), 0.04) 0 2px, transparent 3px) 0 0 / 11px 11px,
    radial-gradient(circle at 50% 55%, #43311f, #251a10 75%);
  box-shadow: inset 0 2px 6px rgba(var(--shadow-rgb), 0.6);
}
.tools-panel .gn-planter img {
  width: 70%;
  filter: drop-shadow(0 3px 3px rgba(var(--shadow-rgb), 0.6));
}
.gn-planter > span.is-center {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 18px rgba(var(--gold-rgb), 0.35), 0 0 14px rgba(var(--gold-rgb), 0.35);
}
.gn-planter__n {
  top: 4px;
  left: 4px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(var(--shadow-rgb), 0.6);
  font-size: 0.8rem;
}
.gn-planter .is-center .gn-planter__n {
  background: var(--gold);
  color: var(--honey-ink);
}
.gn-planter > span.is-free {
  background: radial-gradient(circle at 50% 55%, #2a1e12, #1b130b 75%);
}
.gn-planter small {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}
/* Les façons, en grille (plus de carrousel coupé) */
.gn-variants > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  overflow: visible;
}
.gn-variants > .pl-link {
  justify-self: start;
}
/* Mes graines repliées au-delà de 8 */
.gn-mine__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
/* Le guide suit le défilement */
.gn-guide {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
}
/* Relief au survol */
.gn-result:hover,
.gn-cross__card:hover {
  box-shadow: 0 8px 22px rgba(var(--shadow-rgb), 0.35);
}
/* Les animations, raccordées à la frise */
.is-opening .gn-cross,
.gn-results.is-arriving .gn-best .gn-cross {
  animation: gn-rise 0.4s ease-out both;
  animation-delay: calc(0.08s + var(--i, 0) * 0.12s);
}
.is-opening .gn-crosses::before,
.gn-results.is-arriving .gn-crosses::before {
  animation: gn-grow 0.6s ease-out both;
  transform-origin: top;
}
@keyframes gn-grow {
  from { transform: scaleY(0); }
  to { transform: none; }
}
@media (max-width: 1200px) {
  .gn-guide {
    position: static;
    max-height: none;
  }
}
@media (max-width: 760px) {
  .gn-crosses::before {
    left: 13px;
  }
  .gn-cross {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
  }
  .gn-cross__n {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }
  .gn-cross__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .gn-detail__end {
    margin-left: 0;
  }
  .gn-detail__got {
    justify-items: start;
  }
  .gn-detail,
  .gn-result .gn-detail {
    padding: 4px 10px 14px;
  }
}
.gn-variants > .pl-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: none;
}
@media (max-width: 760px) {
  .gn-variants > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gn-variants button small {
    font-size: 0.8rem;
  }
}

/* ═══ Retours du 8 oct. (soir) : la colonne des espèces comme celle de Craft, les textes d'aide en notes, des tailles
   de texte plus lisibles, la vue des combinaisons plus calme (par nombre de bons gènes), le guide en cartes, les
   avatars des bêtes. ═══ */
.gn-rail {
  position: sticky;
  top: 90px;
  gap: 0;
  padding: 0 0 6px;
  background: linear-gradient(180deg, #1c1813, #141110);
}
.gn-rail h3 {
  margin: 0;
  padding: 12px 14px 6px;
  border-top: 1px solid rgba(var(--sheen-rgb), 0.06);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
.gn-rail h3:first-child {
  border-top: 0;
}
.gn-rail__list {
  gap: 0;
}
.gn-rail .gn-rail__list button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 0;
  border-left: 3px solid transparent;
  border-top: 1px solid rgba(var(--sheen-rgb), 0.04);
  color: var(--text);
  font: 500 0.95rem Roboto, sans-serif;
  transition: background-color 0.15s, color 0.15s;
}
.gn-rail .gn-rail__list button:hover {
  background: rgba(var(--sheen-rgb), 0.035);
  color: var(--cream);
}
.gn-rail .gn-rail__list button.is-on {
  border-left-color: var(--gold);
  background: #342a20;
  box-shadow: none;
  color: var(--cream);
  font-weight: 700;
}
.gn-rail .gn-rail__list small {
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 500;
}
.gn-rail .gn-rail__list button.is-on small {
  color: var(--gold);
}
/* Les notes de la page : la note commune (packages/ui, note.css) ; seuls les écarts restent ici (19 oct.) */
.gn-cross__tip.lpa-note,
.gn-results__sure.lpa-note {
  display: block;
}
.gn-results__sure.lpa-note i {
  color: var(--state-ok);
}
/* Des textes plus lisibles */
.gn-cross__label {
  font-size: 0.85rem;
}
.gn-cross__ref {
  font-size: 0.95rem;
}
.gn-cross__center em,
.gn-cross__then,
.gn-offer__text,
.gn-scan__how {
  font-size: 0.92rem;
}
.gn-variants > p,
.gn-mine__title,
.gn-entry__label small {
  font-size: 0.9rem;
}
.gn-variants button small {
  font-size: 0.8rem;
}
.gn-planter small {
  font-size: 0.8rem;
}
.gn-result__meta {
  font-size: 0.9rem;
}
.gn-genes.is-mid b {
  width: 26px;
  height: 26px;
  font-size: 0.9rem;
}
/* La vue des combinaisons, plus calme : des sections par nombre de bons gènes, les gènes en cases, la valeur en jeu */
.gn-tier {
  display: grid;
  gap: 6px;
}
.gn-tier h4 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 2px;
  color: var(--cream);
  font: 700 1rem "Roboto Condensed", sans-serif;
}
.gn-tier h4 small {
  color: var(--text-soft);
  font: 400 0.85rem Roboto, sans-serif;
}
.gn-result__plant {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.gn-compo.is-quiet b {
  padding: 0;
  border: 0;
  font-weight: 700;
}
.gn-compo.is-quiet {
  font-size: 0.85rem;
}
.gn-result__worth-line {
  /* Assez de place pour ses effets, sinon à la ligne (sur mobile, elle était écrasée à quelques pixels) */
  flex: 1 1 200px;
  min-width: 0;
}
.gn-result__worth-line .gn-effects {
  font-size: 0.85rem;
}
.gn-result__head .gn-result__meta {
  flex: 0 1 auto;
  min-width: 0;
}
.gn-result {
  border-left-color: rgba(var(--gold-rgb), 0.35);
}
.gn-weak {
  justify-self: start;
  margin-top: 8px;
}
/* Le guide, en cartes, plus grand */
.gn-guide {
  font-size: 0.95rem;
}
.gn-guide > h3 {
  font-size: 1.2rem;
}
.gn-fold summary {
  font-size: 1rem;
}
.gn-fold summary > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gn-fold summary > span i {
  width: 18px;
  color: var(--gold);
  text-align: center;
}
.gn-gene-cards {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gn-gene-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(var(--sheen-rgb), 0.06);
  background: rgba(var(--sheen-rgb), 0.025);
}
.gn-gene-card > span {
  display: grid;
  gap: 1px;
}
.gn-gene-card b {
  color: var(--cream);
  font: 700 0.98rem "Roboto Condensed", sans-serif;
}
.gn-gene-card small {
  color: var(--text-soft);
  font-size: 0.86rem;
  line-height: 1.35;
}
.gn-gene-card.is-g,
.gn-gene-card.is-y,
.gn-gene-card.is-h {
  border-left: 3px solid rgba(96, 137, 27, 0.8);
}
.gn-gene-card.is-w,
.gn-gene-card.is-x {
  border-left: 3px solid rgba(170, 71, 52, 0.8);
}
.gn-rule {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gn-rule;
}
.gn-rule li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  color: var(--text);
  line-height: 1.45;
  counter-increment: gn-rule;
}
.gn-rule li::before {
  content: counter(gn-rule);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(var(--gold-rgb), 0.6);
  border-radius: 50%;
  color: var(--value-strong);
  font: 700 0.85rem "Roboto Condensed", sans-serif;
}
.gn-stages li {
  padding: 6px 0;
  font-size: 0.95rem;
}
/* Le nom de l'étape sur le panneau du jeu (en anglais), sous le nom en français. 0,8 rem : le plancher du site
   (12,8 px, `small` de base.css) ; à 0,76 rem il tombait à 12,2 px (contrôle final, 21 oct. 2026). */
.gn-stages li small {
  display: block;
  color: var(--text-soft);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
}
.gn-stages li.is-cross small {
  color: inherit;
  opacity: 0.8;
}
.gn-stages li.is-cross {
  margin: 2px 0;
  padding: 6px 8px;
  background: rgba(var(--gold-rgb), 0.1);
}
.gn-tips {
  gap: 10px;
}
.gn-tips li {
  padding: 0;
  background: none;
  line-height: 1.45;
}
/* Une ligne à icône : l'icône dans sa colonne, le texte à côté (sans icône, le texte prend toute la largeur) */
.gn-tips li:has(> i) {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  padding: 0;
  background: none;
  line-height: 1.45;
}
.gn-tips li > i {
  margin-top: 3px;
  color: var(--gold);
  text-align: center;
}
/* Les bêtes : les avatars du jeu */
.tools-panel img.lv-avatar {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.tools-panel .gn-card__head img.lv-avatar {
  width: 34px;
  height: 34px;
}
.tools-panel .gn-empty-state__art img.lv-avatar {
  width: 64px;
  height: 64px;
}
.lv-genelist small,
.lv-best .lv-facts small,
.lv-cover__row,
.lv-row__parents {
  font-size: 0.9rem;
}
@media (max-width: 1200px) {
  .gn-rail {
    position: static;
  }
}
@media (max-width: 760px) {
  .tools-panel .gn-tabs__tiles img.lv-avatar {
    width: 38px;
    height: 38px;
  }
}

/* Revue du 8 oct. (soir) : plus aucun texte sous 12,5 px (statuts des bêtes, chances, autres couples, raccourcis de
   l'état vide, compteurs de la colonne et des onglets mobiles) */
.lv-row__status .lv-key,
.lv-row__status .lv-flag,
.lv-odds td small,
.lv-others button small,
.gn-empty-state__ways small,
.gn-rail .gn-rail__list small,
.gn-tabs__tiles .gn-rail__list small {
  font-size: 0.82rem;
}
.lv-odds__parents .lv-dot,
.lv-odds td .lv-dot {
  font-size: 0.8rem;
}
.lv-picks .lv-pick small,
.gn-mine .gn-list li > small {
  font-size: 0.8rem;
}
/* L'objectif des bêtes : la liste en entier (elle était coupée) */
.lv-goal__pick {
  flex: 1 1 100%;
  min-width: 0;
}
.lv-goal__pick select {
  width: 100%;
  max-width: none;
}
/* « Sûr, dans l'ordre donné » : l'icône écartée du texte */
.gn-result__meta .is-order i {
  margin-right: 5px;
}
@media (max-width: 760px) {
  /* Mes graines sur deux colonnes : quinze graines tenaient sur deux écrans */
  .gn-mine .gn-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* « Tu obtiens : » d'un seul tenant */
.gn-cross__gets {
  white-space: nowrap;
}
@media (max-width: 760px) {
  /* Les autres plantes : le rang reste à côté de la plante, la composition passe dessous si besoin */
  .gn-result__head .gn-result__plant {
    flex: 1 1 200px;
    min-width: 0;
  }
}
@media (max-width: 760px) {
  /* Les noms des gènes sous les ronds de saisie : condensés, sur une ligne (« Rendement » tient dans ses 58 px).
     Avant : sur deux lignes, la coupure par trait d'union ne se faisait pas et « Rendemen-t » se coupait n'importe où */
  .lv-picks .lv-pick small {
    max-width: none;
    overflow: visible;
    font-family: "Roboto Condensed", sans-serif;
    line-height: 1.2;
    text-overflow: clip;
    white-space: nowrap;
  }
}

/* La frise rangée par étape, l'état de la jardinière et le temps de chaque croisement (18 oct.) */
.gn-crosses__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-left: 48px;
}
.gn-crosses__step b {
  color: var(--gold);
  font: 800 0.86rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gn-crosses__step span {
  color: var(--text-soft);
  font-size: 0.88rem;
}
/* Ce que l'objectif change en jeu, sous la rangée des réglages */
.gn-options__goal {
  display: flex;
  grid-column: 1 / -1;
  gap: 8px;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.88rem;
}
.gn-options__goal > i {
  margin-top: 3px;
  color: var(--gold);
}
.gn-options__goal b {
  color: var(--cream);
  font-weight: 600;
}
.gn-options__goal .gn-effects {
  display: inline-flex;
  margin: 0 4px;
  vertical-align: middle;
}
/* L'état de la jardinière, avec les réglages : sa ligne à lui, le menu et ce qu'il est */
.gn-options__garden {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  align-items: center;
  gap: 12px 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--gold-rgb), 0.14);
}
/* L'état de la jardinière : un nombre de 1 à 100, suivi de « % » */
.gn-quality-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gn-quality-field input[type="text"] {
  width: 64px;
  text-align: right;
}
/* La barre à glisser, au miel (comme l'état d'un objet au Recycleur) */
.gn-quality-field input[type="range"] {
  flex: 1;
  min-width: 120px;
  accent-color: var(--gold);
  cursor: pointer;
}
.gn-quality-field b {
  color: var(--cream);
  font: 700 0.95rem "Roboto Condensed", sans-serif;
}
@media (max-width: 760px) {
  .gn-options__garden {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Les durées d'un croisement : fond noir, comme un relevé */
.gn-time {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  background: #0c0a07;
  color: var(--cream);
  font: 700 0.9em "Roboto Condensed", sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.gn-timing {
  display: grid;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 0.86rem;
}
.gn-timing ol {
  display: grid;
  list-style: none;
  gap: 6px;
  margin: 0;
  padding: 0;
  color: var(--cream);
}
/* La recette à cocher : la case à gauche, le geste fait passe en vert */
.gn-recipe li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.gn-recipe__check {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font-size: 1.05rem;
  line-height: 1.3;
  cursor: pointer;
}
.gn-recipe__check:disabled {
  opacity: 0.35;
  cursor: default;
}
.gn-recipe li.is-done .gn-recipe__check {
  color: #8fb07a;
}
.gn-recipe li.is-done > span {
  color: var(--text-soft);
}
/* Où en est le croisement commencé, en direct */
.gn-timing p.gn-timing__live {
  margin: 2px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  border-left: 3px solid var(--gold);
  background: rgba(12, 10, 7, 0.6);
  color: var(--cream);
}
.gn-timing p.gn-timing__live.is-now {
  border-color: #8fb07a;
  background: rgba(99, 194, 90, 0.1);
}
.gn-timing__live.is-now i,
.gn-timing__live.is-crossed i {
  color: #8fb07a;
}
.gn-timing p.gn-timing__live.is-late {
  border-color: var(--red-text);
  background: rgba(var(--red-text-rgb), 0.09);
}
.gn-timing__live.is-late i {
  color: var(--red-text);
}
.gn-timing li::marker {
  color: var(--gold);
  font-weight: 700;
}
.gn-timing p {
  display: flex;
  gap: 8px;
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--gold-rgb), 0.14);
}
.gn-timing i {
  margin-top: 3px;
  color: var(--gold);
}
.gn-timing p.gn-timing__bounds {
  margin: 0;
  padding: 0 0 0 20px;
  border-top: 0;
  color: var(--text-soft);
}

/* L'arbre des croisements (18 oct.) : les plantes de départ, puis une colonne par étape, reliées par des courbes */
.gn-tree {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  background: rgba(12, 10, 7, 0.35);
}
.gn-tree__total {
  display: flex;
  gap: 8px;
  margin: 0;
  color: var(--cream);
  font-size: 0.92rem;
}
.gn-tree__total i {
  margin-top: 3px;
  color: var(--gold);
}
.gn-tree__board {
  position: relative;
}
.gn-tree__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.gn-tree__links path {
  fill: none;
  stroke: rgba(var(--gold-rgb), 0.45);
  stroke-width: 1.5;
}
.gn-tree__cols {
  position: relative;
  display: grid;
  grid-template-columns: max-content repeat(var(--steps), minmax(0, 1fr));
  gap: 12px 36px;
  align-items: center;
}
.gn-tree__col {
  display: grid;
  align-content: center;
  gap: 8px;
}
.gn-tree__col h6 {
  margin: 0;
  color: var(--gold);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gn-tree__node {
  display: grid;
  justify-items: start;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid rgba(var(--sheen-rgb), 0.08);
  background: #1d1810;
}
.gn-tree__node b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cream);
  font: 700 0.86rem "Roboto Condensed", sans-serif;
}
.gn-tree__node small {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.gn-tree__node.is-start {
  grid-template-columns: 34px auto 22px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}
.gn-tree__node.is-start small {
  color: var(--gold);
  font-weight: 700;
}
.gn-tree__col:first-child {
  gap: 6px;
}
.gn-tree__node.is-start.is-any b {
  grid-column: 1 / 3;
  white-space: nowrap;
}
.gn-tree__node.is-start.is-any > span {
  display: none;
}
.gn-tree__node.is-any b {
  color: var(--text-soft);
  font-style: italic;
}
.gn-tree__node.is-cross {
  border-color: rgba(var(--gold-rgb), 0.4);
}
.gn-tree__node.is-final {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.12);
}
.gn-tree__node.is-final b i {
  color: var(--gold);
}
@media (max-width: 760px) {
  .gn-tree__cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .gn-tree__links {
    display: none;
  }
}

/* Le stock réel : la ligne en tête de la recette, et « 1/2 » à côté de chaque plante de départ dans l'arbre */
.gn-stock {
  margin: 0 0 14px;
}
.gn-stock .text-link {
  flex: none;
  margin: 0 0 0 auto;
}
.gn-tree__node.is-start {
  grid-template-columns: 34px auto 22px 34px;
}
.gn-tree__node.is-start em {
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  font-style: normal;
  text-align: right;
}
.gn-tree__node.is-start em.is-ok {
  color: #8fb07a;
}
.gn-tree__node.is-start em.is-missing {
  color: var(--red-text);
}

/* Les égalités : les places où l'ordre tranche, et chaque issue d'un ordre quelconque avec sa part */
.gn-ties {
  margin: 8px 0 0;
}
.gn-ties > div {
  display: grid;
  gap: 6px;
}
.gn-ties p {
  margin: 0;
}
.gn-ties ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.gn-ties li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gn-ties li b {
  color: var(--cream);
  font: 700 0.84rem "Roboto Condensed", sans-serif;
}
.gn-ties .gn-genes.is-sure {
  outline: 1px solid var(--gold);
  outline-offset: 2px;
}

/* Le scan : une lecture reconnue d'une autre espèce, proposée (19 oct.) */
.gn-scan__other {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--cream);
  font-size: 0.86rem;
}
.gn-scan__other img {
  width: 26px;
  height: 26px;
}
.gn-scan__other .pl-link.is-quiet {
  color: var(--text-soft);
}

/* Ce qu'on a sur soi, à côté de chaque résultat : tout (vert) ou combien il manque (orange) */
.gn-result__meta .is-stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.gn-result__meta .is-stock.is-ok {
  color: #8fb07a;
}
.gn-result__meta .is-stock.is-missing {
  color: #e0892e;
}

/* Le plan d'élevage sur plusieurs générations : une frise de couples, le petit à garder à chaque fois (19 oct.) */
.lv-plan__steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
  list-style: none;
}
.lv-plan__steps > li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.lv-plan__steps p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  color: var(--cream);
}
.lv-plan__steps small {
  color: var(--text-soft);
}
.lv-plan__steps small.is-warn {
  color: #e0892e;
}
.lv-plan__n {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(var(--gold-rgb), 0.75);
  border-radius: 50%;
  color: var(--value-strong);
  font: 800 0.95rem "Roboto Condensed", sans-serif;
}
.lv-plan__steps > li.is-final .lv-plan__n {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--honey-ink);
}
.lv-plan__couple b {
  font-weight: 700;
}
.lv-plan__couple em {
  color: var(--value-strong);
  font-style: normal;
  font-weight: 700;
}
.lv-plan .lv-note {
  margin: 0 16px 16px;
}

/* Un morceau coupé depuis l'admin : on dit ce qui manque, là où il était (19 oct.) */
.gn-off {
  margin: 10px 0 0;
  font-size: 0.88rem;
}
.gn-rail .gn-off,
.gn-tabs .gn-off {
  margin: 12px 0 0;
}

/* Le pas à pas d'un couple : ce qu'il faut faire en jeu, étape par étape (19 oct.) */
.lv-best__head h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.lv-steps__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 16px 16px 16px 38px;
  color: var(--cream);
}
.lv-steps__list li::marker {
  color: var(--gold);
  font-weight: 700;
}
.lv-steps__v {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  background: #0c0a07;
  color: var(--cream);
  font: 700 0.9em "Roboto Condensed", sans-serif;
  white-space: nowrap;
}
.lv-steps .lv-note {
  margin: 0 16px 16px;
}