/* L'EPREUVE ULTIME — les eclats, les cases du mot, le clavier, le diamant.

   Neuvieme feuille, chargee apres gain.css : toutes ses regles sont portees
   par #screen-final, donc sa place dans la cascade ne peut rien deranger
   ailleurs. Comme les huit autres, elle doit rester alignee entre
   frontend/index.html et SHELL_FILES dans frontend/sw.js.

   Trois partis pris tiennent tout l'ecran :

   - **La colonne est un flex, pas un bloc.** Le corps prend exactement ce que
     l'entete lui laisse, et c'est LUI qui defile : en hauteur fixe, le clavier
     et le bouton « Reveiller le Coeur » passaient sous le bord de la dalle —
     la seule chose qu'on ne voyait pas etant celle sur laquelle on appuie.
   - **Rien ne s'anime que `transform` et `opacity`**, que le compositeur
     traite sans repeindre. Un ecran de fin de sortie tourne sur un telephone
     dont la batterie a deja fait trois heures de GPS.
   - **La lettre prime sur le dessin.** L'eclat est joli, mais c'est sa lettre
     qu'on lit a bout de bras : elle est posee PAR-DESSUS, en gros, sur un fond
     sombre qui la detache du dessin quel qu'il soit. */

#screen-final {
  padding: 0;
  overflow: hidden;
}

#screen-final.active {
  display: flex;
  flex-direction: column;
}

/* Le fond : la meme nuit verte que le reste du jeu, avec une lueur au centre
   — le Coeur est la, on regarde vers lui. `radial-gradient` et non une image :
   cet ecran s'ouvre au bout de trois heures de marche, il n'a pas a
   telecharger quoi que ce soit. */
.fin-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 12%, rgba(127, 208, 127, 0.16), transparent 62%),
    radial-gradient(90% 60% at 50% 100%, rgba(226, 201, 141, 0.10), transparent 70%),
    linear-gradient(180deg, #0a1a12 0%, #071510 100%);
}

.fin-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(var(--safe-top) + 10px) 14px 10px;
  flex: none;
}

.fin-emblem {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bois-2);
  border: 1px solid rgba(226, 201, 141, 0.35);
  box-shadow: 0 0 18px rgba(226, 201, 141, 0.18);
}

.fin-emblem img { width: 34px; height: 34px; }

/* Le corps defile, et lui seul : l'entete garde sa place, comme sur la fiche
   d'une balise. */
.fin-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 14px calc(var(--safe-bot) + 20px);
  -webkit-overflow-scrolling: touch;
}

.fin-wait,
.fin-empty {
  text-align: center;
  color: var(--parch-dim);
  padding: 40px 16px;
}

.fin-empty h2 {
  font-family: var(--display);
  color: var(--gold);
  margin: 14px 0 8px;
}

.fin-empty p { margin: 0; font-size: 0.92rem; line-height: 1.5; }

.fin-empty-ic {
  width: 88px;
  height: 88px;
  opacity: 0.7;
}

/* L'enigme : c'est elle qu'on relit entre deux tentatives. Sur parchemin,
   comme le livre — ce n'est pas de l'interface, c'est du texte de jeu. */
.fin-hint {
  margin: 4px 0 16px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bois-2);
  border: var(--line);
  color: var(--parchment);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

/* ---------------------------------------------------- les cases du mot */

/* Elles s'enroulent : un mot de douze lettres sur une dalle de 360 px ne tient
   pas sur une ligne, et retrecir les cases jusqu'a les rendre illisibles
   n'aurait servi qu'a garder une ligne unique que personne ne demande. */
.fin-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.fin-slot {
  width: 44px;
  height: 56px;
  border-radius: 10px;
  border: 2px solid rgba(168, 224, 160, 0.22);
  background: var(--bois-3);
  color: var(--parchment);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 900;
  display: grid;
  place-items: center;
  transition: transform 120ms ease, border-color 160ms ease;
}

.fin-slot.on {
  border-color: rgba(226, 201, 141, 0.6);
  color: var(--gold);
  background: rgba(226, 201, 141, 0.08);
}

/* La case ou l'on ecrit : elle bat, doucement. Sans elle on ne sait pas ou la
   prochaine lettre va tomber, et l'on tape deux fois la meme. */
.fin-slot.cur {
  border-color: var(--moss);
  animation: fin-pulse 1.6s ease-in-out infinite;
}

@keyframes fin-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .fin-slot.cur { animation: none; }
}

/* ------------------------------------------------------------ les eclats */

.fin-shards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}

/* Le dessin de l'eclat, et SA lettre par-dessus. La lettre est ce qu'on lit a
   bout de bras : elle a son propre fond sombre, sinon elle se perdrait dans
   les nuances du dessin. */
.fin-shard {
  position: relative;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
}

.fin-shard img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.fin-shard b {
  position: absolute;
  bottom: -2px;
  right: -2px;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 8px;
  background: rgba(21, 14, 7, 0.92);
  border: 1px solid rgba(226, 201, 141, 0.5);
  color: var(--gold);
  font-family: var(--display);
  font-size: 0.95rem;
  line-height: 22px;
  text-align: center;
}

/* Ouvert au diamant : le meme eclat, mais cercle de bleu. On doit pouvoir
   relire ce qu'on a paye — c'est la trace de l'arbitrage. */
.fin-shard.gem b {
  border-color: var(--gem);
  color: var(--gem);
}

/* Ce qui dort encore sur le sentier. Un trou, pas un eclat grise : il ne
   ressemble a rien de connu, donc il ne se confond avec rien. */
.fin-shard.hole {
  border: 2px dashed rgba(168, 224, 160, 0.22);
  border-radius: 12px;
  color: var(--parch-faint);
}

.fin-shard.hole i {
  font-style: normal;
  font-size: 1.4rem;
  font-family: var(--display);
}

.fin-note {
  margin: 0 0 16px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--parch-faint);
}

/* ------------------------------------------------------------ le clavier */

/* Tout l'alphabet : il faut pouvoir taper ce qu'on n'a pas. La grille
   s'adapte a la largeur plutot que de fixer un nombre de colonnes — une dalle
   de 360 px en tient six, une de 430 en tient sept, et aucune ne doit voir
   une touche partir a la ligne toute seule. */
.fin-keys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
  gap: 6px;
  margin-bottom: 16px;
}

.fin-key {
  position: relative;
  height: 44px;
  border-radius: 10px;
  border: var(--line-soft);
  background: var(--bois-2);
  color: var(--parch-dim);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
}

/* La lettre qu'on tient : doree, et cerclee. C'est ce que le terrain a donne,
   et cela doit se voir sans lire. */
.fin-key.has {
  color: var(--gold);
  border-color: rgba(226, 201, 141, 0.45);
  background: rgba(226, 201, 141, 0.10);
}

/* Deux fois la meme lettre : le petit chiffre evite de croire qu'on l'a
   deja posee. */
.fin-key u {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.55rem;
  text-decoration: none;
  color: var(--gold-deep);
}

/* ------------------------------------------------------------- les gestes */

.fin-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.fin-acts .grow { flex: 1 1 100%; }

/* Le diamant. Bleu, et seul de sa couleur dans l'application : c'est le seul
   endroit ou l'on echange volontairement des points contre de l'aide, et ce
   choix ne doit ressembler a aucun autre bouton. */
.btn.gem {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: linear-gradient(180deg, rgba(100, 200, 240, 0.20), rgba(100, 200, 240, 0.08));
  border: 1px solid rgba(100, 200, 240, 0.45);
  color: var(--parchment);
}

.btn.gem:disabled { opacity: 0.45; }

.btn.gem b { display: block; font-size: 0.9rem; }
.btn.gem i { display: block; font-style: normal; font-size: 0.72rem; color: var(--parch-faint); }

/* Le diamant lui-meme, dessine : deux triangles et une facette. Une image de
   plus pour un bouton ne vaut pas une requete. */
.fin-gem-ic {
  width: 26px;
  height: 26px;
  flex: none;
  background: linear-gradient(160deg, #9fe4ff, #64c8f0 45%, #2b8fbd);
  clip-path: polygon(50% 0%, 100% 36%, 50% 100%, 0% 36%);
  box-shadow: 0 0 12px rgba(100, 200, 240, 0.5);
}

/* Un bouton qui ne commande rien doit le DIRE. « Reveiller le Coeur » garde
   son or tant que le mot n'est pas complet, et on le touchait sans rien
   obtenir — le doute portait alors sur l'application, pas sur le mot. */
#screen-final .btn:disabled {
  opacity: 0.4;
  filter: saturate(0.5);
}

.fin-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--parch-faint);
}

.fin-foot i { font-style: normal; color: var(--gem); }

.fin-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* ------------------------------------------------------------- la victoire */

.fin-win {
  text-align: center;
  padding: 24px 8px 8px;
}

.fin-win-ic {
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 201, 141, 0.22), transparent 68%);
  animation: fin-beat 1.8s ease-in-out infinite;
}

.fin-win-ic img { width: 96px; height: 96px; }

@keyframes fin-beat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.09); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .fin-win-ic { animation: none; }
}

.fin-win h2 {
  font-family: var(--display);
  color: var(--gold);
  font-size: 1.35rem;
  margin: 0 0 8px;
}

.fin-win p { color: var(--parch-dim); margin: 0 0 18px; }
.fin-win b { color: var(--parchment); }

.fin-win-lines {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.fin-win-lines div {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bois-2);
  border: var(--line);
}

.fin-win-lines i { font-style: normal; color: var(--parch-faint); font-size: 0.85rem; }
.fin-win-lines b { color: var(--gold); font-family: var(--display); }

/* L'ancienne enigme d'aventure, quand le parcours ne porte pas de mot : une
   sortie deja preparee ne devient pas injouable parce qu'on a ajoute un
   ecran. */
.fin-old { padding: 8px 0; }
.fin-old .code-input { margin-bottom: 12px; letter-spacing: 0.2em; font-size: 1.2rem; }

/* ------------------------------------------- le second podium, au classement

   Il vit dans l'onglet Classement, sous celui des points, parce que les deux se
   lisent ensemble : deux vainqueurs, deux etalons. Ses regles sont ici et non
   dans jeu.css — c'est l'epreuve ultime qui les porte, et on ne cherche pas
   « le mot du Coeur » dans la feuille de la carte. */
.board-final {
  margin: 18px 0 6px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--bois-2);
  border: 1px solid rgba(226, 201, 141, 0.22);
}

.bf-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.bf-head b { display: block; font-family: var(--display); color: var(--gold); }
.bf-head i { display: block; font-style: normal; font-size: 0.72rem; color: var(--parch-faint); }

/* Le meme diamant que le bouton d'echange : c'est ce qui relie le podium a
   l'epreuve, sans y remettre une image. */
.bf-ic {
  width: 22px;
  height: 22px;
  flex: none;
  background: linear-gradient(160deg, #f2e0b0, var(--gold) 45%, var(--gold-deep));
  clip-path: polygon(50% 0%, 100% 36%, 50% 100%, 0% 36%);
}

.bf-empty { font-size: 0.82rem; color: var(--parch-faint); }

.bf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-top: var(--line-soft);
}

.bf-row.me { background: rgba(127, 208, 127, 0.08); border-radius: 10px; }

.bf-rank {
  width: 22px;
  text-align: center;
  font-family: var(--display);
  color: var(--gold);
  font-size: 1.05rem;
}

.bf-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--parchment);
}

.bf-name i {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  color: var(--parch-faint);
}

.bf-tries {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--moss);
  text-align: right;
}

.bf-tries u {
  display: block;
  text-decoration: none;
  font-size: 0.6rem;
  color: var(--parch-faint);
}

/* LA CASE ACQUISE : un eclat l'a donnee, ou un diamant l'a ouverte. Elle ne se
   reecrit pas — c'est un acquis, pas une proposition — et elle doit se
   distinguer d'un coup d'oeil de ce qu'on vient de taper, sinon on ne sait
   plus ce qui est sur et ce qui est devine. Fond de pierre et liseré dore. */
.fin-slot.fixed {
  border-color: var(--gold, #e2c98d);
  background: rgba(226, 201, 141, 0.16);
  color: var(--gold, #e2c98d);
  box-shadow: inset 0 0 0 1px rgba(226, 201, 141, 0.25);
  cursor: default;
}

/* CE QUE LE MOT RAPPORTE, sur le bouton qui le tente : l arbitrage « je paie
   une lettre trente points » ne se fait pas a l aveugle si l on sait ce qu il
   y a au bout. */
.fin-acts .fin-prize {
  display: block; font-style: normal; font-size: 0.72rem; font-weight: 700;
  opacity: 0.85; margin-top: 2px;
}