/* ============================================================
   neo — les vies des autres joueurs dans la tienne
   Chargé après neo.css, sous html.neo comme lui. Un fichier par
   chantier pour que les refontes parallèles ne se marchent pas dessus.

   La carte d'une rencontre (js/game.js, `autresCarte`) :
   - STRUCTURE : la scène (décor du lieu, le sceau de la sorte), puis la
     fiche de l'autre vie, le récit, la réplique, les faits.
   - RELIEF : la fiche est une pièce posée sur la carte (surface 2, ombre
     nette), le sceau sort du cadre de la scène, le tampon « Vie jouée »
     est encré par-dessus. L'avis de recherche est sur papier, la Pierre
     en pierre. Aucun dégradé ajouté : celui de la scène est celui de neo.
   - MOUVEMENT : le sceau s'imprime, la fiche monte, le tampon tombe en
     dernier, les noms de la Pierre se gravent un par un.
   ============================================================ */

/* Le titre pour les lecteurs d'écran : la scène est muette. */
.autres-lu {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- la scène ---------- */
html.neo #card-zone .game-card.autres-carte .autres-scene {
  height: clamp(150px, 24vh, 220px);
}
/* Le sceau de la sorte (縁 碑 賞 血 隊 獣) : un hanko vermillon, qui
   déborde du cadre en bas à droite comme un personnage en sort par le haut. */
html.neo .autres-kanji {
  position: absolute;
  right: 16px;
  bottom: -22px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: #c8322a;
  color: #fff4e6;
  font: 900 38px/1 "Noto Serif JP", "Yu Mincho", serif;
  box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.25) inset, 0 10px 18px -8px rgba(0, 0, 0, 0.8);
  transform: rotate(-6deg);
  animation: autres-sceau 0.5s 0.15s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
html.neo .autres-pierre .autres-kanji { background: #5d6270; }
html.neo .autres-prime .autres-kanji { background: #1a1611; color: #ffcf6a; }
html.neo .autres-sang .autres-kanji { background: #7d1414; }
html.neo .autres-carte .neo-plaque { right: 96px; }

/* ---------- la fiche de l'autre vie ---------- */
html.neo #card-zone .autres-fiche {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 30px !important;
  margin-bottom: 10px !important;
  padding: 12px 12px 12px 12px;
  background: var(--n-s2);
  border: 1px solid var(--n-filet-fort);
  border-radius: 14px;
  box-shadow: var(--n-ombre-choix);
  animation: autres-monte 0.45s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.neo .autres-embleme {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--n-s3);
  border: 1px solid var(--n-filet);
  overflow: hidden;
  font: 900 22px/1 "Noto Serif JP", serif;
  color: var(--n-doux);
}
html.neo .autres-embleme .flag { width: 34px !important; height: 34px !important; object-fit: contain; margin: 0 !important; }
html.neo .autres-id { min-width: 0; display: grid; gap: 3px; text-align: left; }
html.neo .autres-ryo {
  font: 900 22px/1.1 var(--n-titre);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: #b02a1f;
}
html.neo .autres-id strong {
  font: 900 19px/1.15 var(--n-titre);
  letter-spacing: -0.01em;
  color: #fff;
  overflow-wrap: anywhere;
}
html.neo .autres-id small {
  font: 600 12.5px/1.3 var(--n-titre);
  color: var(--n-doux);
}
/* Le tampon : encre rouge, de travers, posé en dernier. */
html.neo .autres-tampon {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 5px 7px;
  border: 2px solid #ff5a4a;
  border-radius: 6px;
  color: #ff6b5c;
  transform: rotate(7deg);
  animation: autres-tampon 0.35s 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
html.neo .autres-tampon b {
  font: 900 9.5px/1 var(--n-titre);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
html.neo .autres-tampon i {
  font: 800 11px/1 var(--n-titre);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* L'avis de recherche : du papier, de l'encre noire, un tampon rouge. */
html.neo #card-zone .autres-fiche.autres-avis {
  background: #efe6d0;
  border: 2px solid #1a1611;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.85);
  transform: rotate(-0.6deg);
}
html.neo .autres-avis .autres-id strong { color: #1a1611; text-transform: uppercase; letter-spacing: 0.02em; }
html.neo .autres-avis .autres-id small { color: #5b5245; }
html.neo .autres-avis .autres-embleme { background: #e2d6ba; border-color: rgba(26, 22, 17, 0.25); }
html.neo .autres-avis .autres-tampon { border-color: #b02a1f; color: #b02a1f; }

/* La Pierre : des noms gravés, un par ligne, qui arrivent un par un. */
html.neo .autres-stele {
  list-style: none;
  margin: 30px 0 10px !important;
  padding: 6px 14px !important;
  background: #2b2e36;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px 14px 6px 6px;
  box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.35) inset, 0 12px 22px -12px rgba(0, 0, 0, 0.9);
}
html.neo #screen-end .autres-stele { margin: 4px 0 10px !important; }
html.neo .autres-stele li {
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: autres-grave 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.neo .autres-stele li:last-child { border-bottom: 0; box-shadow: none; }
html.neo .autres-stele li:nth-child(2) { animation-delay: 0.12s; }
html.neo .autres-stele li:nth-child(3) { animation-delay: 0.24s; }
html.neo .autres-stele li:nth-child(4) { animation-delay: 0.36s; }
html.neo .autres-stele li:nth-child(5) { animation-delay: 0.48s; }
html.neo .autres-stele strong {
  font: 800 15px/1.2 var(--n-titre);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d9dbe2;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow-wrap: anywhere;
}
html.neo .autres-stele small { font: 600 12px/1.35 var(--n-titre); color: var(--n-pale); }
html.neo .autres-stele li.autres-toi strong { color: var(--n-orange); }
html.neo .autres-stele li.autres-toi { border-left: 3px solid var(--n-orange); padding-left: 10px; margin-left: -14px; padding-right: 0; }

/* ---------- la réplique, les faits, la note ---------- */
html.neo #card-zone .autres-replique {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  padding: 10px 12px;
  border-left: 3px solid var(--n-orange);
  border-radius: 0 10px 10px 0;
  background: var(--n-s2);
  font: 500 15.5px/1.5 var(--n-titre);
  color: var(--n-encre);
  text-align: left;
}
html.neo .autres-qui {
  display: block;
  margin-bottom: 4px;
  font: 700 12.5px/1.35 var(--n-titre);
  color: var(--n-orange);
}
html.neo #card-zone .autres-faits {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  padding: 0;
}
html.neo .autres-faits li {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--n-s2);
  border: 1px solid var(--n-filet-fort);
  font: 600 12.5px/1.3 var(--n-titre);
  color: var(--n-doux);
  animation: autres-monte 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.neo .autres-faits li:nth-child(2) { animation-delay: 0.08s; }
html.neo .autres-faits li:nth-child(3) { animation-delay: 0.16s; }
html.neo .autres-faits li:nth-child(4) { animation-delay: 0.24s; }
html.neo .autres-faits li:nth-child(n + 5) { animation-delay: 0.32s; }
html.neo .autres-note {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  font: 500 12.5px/1.45 var(--n-titre) !important;
  color: var(--n-pale) !important;
  text-align: left !important;
}
html.neo #screen-end .autres-pierre-fin .autres-note { margin-top: 0 !important; }

/* ---------- le mouvement ---------- */
@keyframes autres-sceau {
  from { transform: rotate(-18deg) scale(1.7); opacity: 0; }
  to { transform: rotate(-6deg) scale(1); opacity: 1; }
}
@keyframes autres-monte {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes autres-tampon {
  from { transform: rotate(18deg) scale(1.8); opacity: 0; }
  to { transform: rotate(7deg) scale(1); opacity: 1; }
}
@keyframes autres-grave {
  from { opacity: 0; letter-spacing: 0.3em; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.neo .autres-kanji, html.neo .autres-fiche, html.neo .autres-tampon,
  html.neo .autres-stele li, html.neo .autres-faits li { animation: none !important; }
}

/* ---------- l'ancien habillage : lisible, sans plus ---------- */
html:not(.neo) .autres-fiche { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
html:not(.neo) .autres-id { display: grid; }
html:not(.neo) .autres-tampon { margin-left: auto; font-size: 11px; text-transform: uppercase; display: grid; }
html:not(.neo) .autres-stele { margin: 10px 0; padding-left: 20px; }
html:not(.neo) .autres-stele li small, html:not(.neo) .autres-id small { display: block; opacity: 0.75; }
html:not(.neo) .autres-faits { margin: 10px 0 0; padding-left: 18px; font-size: 13px; }
html:not(.neo) .autres-qui { display: block; font-size: 11px; text-transform: uppercase; opacity: 0.75; }
html:not(.neo) .autres-note { font-size: 12px; opacity: 0.7; }