/* L'écran de fin de match — voir `src/ui/finDeMatch.js`.

   Posé en bas, au-dessus du bandeau dessiné sur le HUD (qui garde l'annonce
   « rejoignez la sortie ») et sous le panneau de maîtrise, qui tombe du haut et
   s'efface au bout de quelques secondes. Les deux ne se recouvrent donc jamais,
   et celui-ci, lui, reste tant que l'après-match dure. */

.fin-de-match {
  --fin-color: #d28cff;
  position: fixed; z-index: 118; left: 50%; bottom: 104px;
  width: min(560px, calc(100vw - 24px));
  padding: 13px 15px 11px;
  color: #eaffff;
  background: linear-gradient(135deg, rgba(9, 20, 34, .96), rgba(3, 9, 16, .97));
  border: 1px solid color-mix(in srgb, var(--fin-color) 46%, transparent);
  box-shadow: 0 18px 62px rgba(0, 0, 0, .68), inset 0 0 44px color-mix(in srgb, var(--fin-color) 6%, transparent);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  opacity: 0; transform: translate(-50%, 14px);
  transition: opacity .2s ease, transform .24s cubic-bezier(.2, .9, .3, 1);
  font-family: Inter, Bahnschrift, "Segoe UI", sans-serif;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.fin-de-match.visible { opacity: 1; transform: translate(-50%, 0); }
.fin-de-match.gagne { --fin-color: #ffd26f; }
/* Le clic est parti : on éteint la barre sans attendre le tick qui relancera,
   sinon un aller-retour réseau la laisse « cliquable » alors qu'elle ne l'est
   plus. */
.fin-de-match.partie { pointer-events: none; opacity: .42; }

.fin-de-match-kicker {
  display: block; color: var(--fin-color);
  font-size: 8px; font-weight: 900; letter-spacing: .24em;
}

.fin-de-match-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 9px 0 8px; }
.fin-de-match-actions button {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1px 9px;
  padding: 9px 11px; color: #cfeaf2; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .035);
  border: 1px solid color-mix(in srgb, var(--fin-color) 26%, transparent);
  transition: color .14s ease, border-color .14s ease, background .14s ease, transform .14s ease;
}
.fin-de-match-actions button:hover,
.fin-de-match-actions button:focus-visible {
  color: #fff; border-color: var(--fin-color); outline: none;
  background: color-mix(in srgb, var(--fin-color) 12%, transparent);
  transform: translateY(-1px);
}
.fin-de-match-actions button:active { transform: translateY(0); }
.fin-de-match-actions b { font-size: 11px; letter-spacing: .13em; }
.fin-de-match-actions em { grid-column: 1; color: #7a97a1; font-size: 7px; font-style: normal; letter-spacing: .06em; }
.fin-de-match-actions kbd {
  grid-row: 1 / 3; grid-column: 2;
  display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px;
  color: var(--fin-color); border: 1px solid currentColor;
  font: 900 9px/1 Inter, Bahnschrift, "Segoe UI", sans-serif;
}
/* La revanche est l'action qu'on vient chercher : elle porte la couleur. */
.fin-de-match-actions [data-fin="revanche"] {
  background: color-mix(in srgb, var(--fin-color) 9%, transparent);
  border-color: color-mix(in srgb, var(--fin-color) 52%, transparent);
}

.fin-de-match-note { margin: 0; color: #6e8b95; font-size: 7px; letter-spacing: .08em; line-height: 1.5; }

@media (max-width: 620px) {
  .fin-de-match { bottom: 84px; padding: 10px 11px 9px; }
  .fin-de-match-actions { gap: 6px; }
  .fin-de-match-actions button { padding: 8px 9px; }
}