/**
 * Bankroll — la scène des gains.
 *
 * Ce que la partie a rapporté : le caractère qu'elle a bougé, les XP qu'elle a
 * donnés, la place qu'elle a fait gagner ou perdre. C'est le seul moment que le
 * joueur attend vraiment, et il se joue à deux endroits — à la sortie de la
 * table, et au salon quand il n'a pas pu la voir. D'où ce fichier à part :
 * `board.css` ne sert qu'à la page de jeu, et le salon en a besoin aussi.
 *
 * Rien ici ne suppose un plateau derrière : la scène tient dans n'importe quel
 * conteneur, feuille de partie ou fenêtre du salon.
 */

/* ------------------------ ce que la partie a changé ---------------------- */

/*
 * Le décompte d'après-partie.
 *
 * Chaque point s'annonce seul, en grand, puis rejoint la ligne du bas où l'on
 * retrouve tout d'un coup d'œil. Pas d'encadré ni de carte flottante : un
 * chiffre énorme, le nom du trait dessous, et sa raison en petit — le reste de
 * l'écran ne sert qu'à le laisser respirer.
 *
 * Vert quand la jauge va dans le bon sens, corail quand elle va dans l'autre :
 * les deux couleurs que le jeu emploie déjà pour l'argent qui entre et celui
 * qui sort.
 */
/*
 * La fenêtre du salon, quand la scène s'y rejoue.
 *
 * Un peu plus large que les autres — la jauge de caractère fait dix crans, et
 * les tasser les rendrait illisibles —, et sans croix de fermeture : on ne
 * ferme pas une bonne nouvelle d'un geste distrait, on la lit jusqu'au bout.
 * C'est justement en la fermant trop vite qu'on la perdait.
 */
.modal-gains .modal-inner {
  max-width: 360px;
  padding: 20px 18px 18px;
}

.scene {
  display: grid;
  gap: 12px;
  padding: 2px 0 0;
  text-align: center;
}

.scene-titre {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Le rang du point qu'on lit : on veut savoir combien il en reste avant de
   taper « OK » une quatrième fois. */
.scene-pas {
  margin-left: 7px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* La piste garde sa hauteur d'un coup à l'autre : sans elle, la ligne du bas
   sauterait à chaque changement. */
/* Juste la place de trois lignes. Elle était réglée pour un décompte qui
   défilait tout seul ; maintenant qu'on lit à son rythme, la fenêtre n'a plus
   à réserver de l'air autour d'un chiffre. */
/*
 * La piste réserve sa hauteur pour que le bouton ne saute pas d'un point à
 * l'autre. Elle est calée sur le plus haut des coups — icône, chiffre, nom,
 * jauge et raison sur deux lignes — et pas un pixel de plus : le vide qui
 * dépasse se voit tout de suite dans une fenêtre du salon, où il n'y a pas de
 * plateau derrière pour l'absorber.
 */
.scene-piste {
  display: grid;
  place-items: center;
  min-height: 158px;
  transition: min-height 0.28s cubic-bezier(0.3, 0, 0.2, 1);
}

/* Le décompte fini, la piste se replie : sans cela le bouton remontait d'un
   bond de dix-sept centimètres. */
.scene-piste.est-vide {
  min-height: 0;
}

.scene-coup {
  display: grid;
  justify-items: center;
  gap: 2px;
  animation: scene-entre 0.34s cubic-bezier(0.18, 0.9, 0.28, 1.1) both;
}

@keyframes scene-entre {
  from { opacity: 0; transform: translateY(14px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

.scene-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: var(--bg-soft);
}

.scene-ico svg {
  width: 18px;
  height: 18px;
}

/* Le chiffre porte le verdict : c'est lui qu'on retient d'un décompte. */
.scene-delta {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.scene-nom {
  font-size: 0.96rem;
  font-weight: 800;
}

/*
 * La jauge du trait, entre son nom et sa raison.
 *
 * Dix crans plutôt qu'une barre pleine : à cette échelle, un dixième de largeur
 * en plus ne se voit pas, alors qu'un cran qui s'allume se voit tout de suite.
 * On lit aussi d'un coup d'œil ce qu'on a et ce qu'il reste — c'est une jauge
 * de fiche de personnage, pas une barre de chargement.
 *
 * Le cran qui vient de bouger garde une lueur : c'est lui qu'on regarde, et
 * c'est le seul qui change entre deux points.
 */
.scene-jauge {
  display: flex;
  gap: 4px;
  margin: 2px 0 4px;
}

.scene-jauge i {
  width: 18px;
  height: 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.11);
  transition: background 0.34s ease, box-shadow 0.34s ease, transform 0.34s cubic-bezier(0.3, 0, 0.15, 1);
}

.scene-jauge i.est-plein {
  background: var(--muted);
}

/* le sens du mouvement décide de la couleur, pas le signe du nombre */
.scene-jauge.monte-bien i.est-plein {
  background: var(--accent-2);
}

.scene-jauge.monte-mal i.est-plein {
  background: var(--danger);
}

.scene-jauge i.vient-de-bouger {
  transform: scaleY(1.5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* un cran qu'on vient de perdre s'éteint sans se gonfler */
.scene-jauge i.vient-de-bouger:not(.est-plein) {
  transform: scaleY(0.62);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.scene-pourquoi {
  max-width: 30ch;
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

.scene-coup.bon .scene-delta,
.scene-coup.bon .scene-ico { color: var(--accent-2); }
.scene-coup.mauvais .scene-delta,
.scene-coup.mauvais .scene-ico { color: var(--danger); }

/* La ligne du bas : tout ce qu'on a gagné, côte à côte. Elle se remplit
   pendant que les points défilent, et reste seule à la fin. */
.scene-ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  transition: min-height 0.25s ease;
}

.scene-ligne.est-complete {
  padding-top: 4px;
}

.scene-jeton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px 6px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 0.92rem;
  font-weight: 800;
  animation: jeton-entre 0.3s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}

@keyframes jeton-entre {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

.scene-jeton svg {
  width: 15px;
  height: 15px;
}

.scene-jeton.bon { color: var(--accent-2); }
.scene-jeton.mauvais { color: var(--danger); }

/*
 * Le bouton qui fait avancer la scène.
 *
 * Il empruntait la grille de la fiche d'achat, qui n'a rien à faire ici : une
 * scène n'a jamais deux gestes à proposer, elle en a un seul, et il prend toute
 * la largeur.
 */
.scene-suite {
  display: grid;
  margin-top: 2px;
  animation: scene-entre 0.3s ease both;
}

.scene-suite .gbtn {
  width: 100%;
}

/*
 * Le dernier écran : ce que la partie a rapporté.
 *
 * Le médaillon d'abord, puisque c'est lui qu'on vient voir ; le rang dessous,
 * la jauge, et les points en petit. Rien n'est encadré : le médaillon se
 * suffit, et l'écran noir autour lui laisse la place. Quand la jauge déborde,
 * le médaillon change en s'appuyant sur son propre éclat — pas de confettis,
 * pas de halo vert, le jeu n'en a nulle part ailleurs.
 */
.niveau-scene {
  gap: 10px;
}

.niveau-piece {
  display: grid;
  place-items: center;
  min-height: 124px;
}

.niveau-piece .niv-badge {
  animation: niveau-pose 0.4s cubic-bezier(0.18, 0.9, 0.28, 1.1) both;
}

@keyframes niveau-pose {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: none; }
}

/* Le passage d'un niveau au suivant : la pièce prend la lumière un instant,
   puis retombe. C'est le seul moment du jeu où quelque chose brille. */
.niveau-piece.vient-de-monter .niv-badge {
  animation: niveau-monte 0.62s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes niveau-monte {
  0% { transform: scale(0.7) rotate(-9deg); filter: brightness(2.4); }
  55% { transform: scale(1.12) rotate(2deg); filter: brightness(1.35); }
  100% { transform: none; filter: none; }
}

.niveau-rang {
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Le mot n'apparaît qu'au changement de famille — tous les vingt-cinq niveaux.
   Il garde sa place le reste du temps pour ne rien faire sauter. */
.niveau-neuf {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.niveau-neuf.est-la {
  opacity: 1;
}

/*
 * Ce qu'un palier vient d'ouvrir : trois visages, et où les trouver. C'est la
 * seule chose de la montée qu'on emporte hors de la partie — elle mérite qu'on
 * s'y arrête plutôt qu'une ligne de plus sous la jauge.
 */
.niveau-palette {
  display: grid;
  justify-items: center;
  gap: 5px;
  margin: 4px 0 2px;
  animation: niveau-pose 0.42s cubic-bezier(0.18, 0.9, 0.28, 1.1) both;
}

.niveau-faces {
  display: flex;
  /* ils se chevauchent comme un jeu de cartes en éventail : trois visages
     alignés auraient l'air d'une liste, pas d'une trouvaille */
  margin-bottom: 3px;
}

.niveau-faces img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  margin-left: -12px;
}

.niveau-faces img:first-child {
  margin-left: 0;
}

.niveau-palette b {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--accent);
}

.niveau-palette small {
  font-size: 0.74rem;
  color: var(--muted);
}

.niveau-jauge {
  height: 7px;
  margin: 2px auto 0;
  width: min(280px, 82%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.niveau-jauge i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.58s cubic-bezier(0.3, 0, 0.15, 1);
}

.niveau-gain {
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 800;
  color: var(--accent);
}

/*
 * Le rang de la semaine, sous la jauge. C'est la seule ligne de cet écran qui
 * puisse annoncer une perte : elle se tient à l'écart du doré, séparée par un
 * filet, et ne prend la couleur du danger que lorsqu'on a reculé.
 */
.niveau-rangsem {
  display: grid;
  gap: 2px;
  /* le bouton suit juste après : sans cet écart, « Place 1 sur 28 » et
     « Compris » se touchaient au bas de la fenêtre */
  margin: 12px 0 14px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.niveau-rangsem b {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--accent-2);
}

.niveau-rangsem.est-perdu b {
  color: #ff8b7e;
}

.niveau-rangsem small {
  font-size: 0.74rem;
  color: var(--muted);
}