/* =============================================================================
   PlayAwale — La fenêtre de fin de partie, condensée (section 84)
   -----------------------------------------------------------------------------
   « Condense la popup de victoire, ça peut être plein écran », puis « plein
   écran directement le résultat, pas de popup » (21/10/2026).
   Elle avait grossi bloc après bloc — l'Elo, les Cauris, la mise, et désormais le
   badge — et dépassait l'écran en hauteur, sur ordinateur comme sur téléphone.

   CE QUI CHANGE, ET SEULEMENT SUR L'ÉCRAN DE FIN (#gameOver) :
   · ce n'est plus une fenêtre posée sur le jeu : le résultat occupe TOUT
     l'écran, sur ordinateur comme sur téléphone — plus de fond assombri autour,
     plus de coins arrondis ; le contenu tient dans une colonne centrée ;
   · partout, les espaces se resserrent : titre, score, blocs, boutons ;
   · les blocs de l'Elo et des Cauris perdent un peu de rembourrage et de taille
     de chiffres — ils restent lisibles d'un coup d'œil ;
   · et si malgré tout le contenu dépasse (écran très bas), la fenêtre défile à
     l'intérieur d'elle-même : les boutons restent toujours atteignables.

   Les autres fenêtres du site ne sont pas touchées.
   ============================================================================= */

/* --- Plein écran, sur le décor du site ------------------------------------------- */
/* LE MÊME FOND QUE LE SITE (21/10/2026, section 84.2) : le sable, le village
   flou par-dessus, et le halo qui éclaire le centre — les trois couches de
   layout/page.css (body, body::before, body::after), reprises telles quelles.
   Le plateau ne se voit plus derrière : c'est un écran, plus une fenêtre. */
#gameOver.modal {
  padding: 0;
  background-color: var(--color-page-bg);
  background-image: var(--gradient-page);
  background-size: cover;
  isolation: isolate;
}

#gameOver.modal::before,
#gameOver.modal::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

#gameOver.modal::before {
  background-image: url('../../img/blured_village-awale-oware-mancala.png');
  background-image: image-set(
    url('../../img/blured_village-awale-oware-mancala.webp') type('image/webp'),
    url('../../img/blured_village-awale-oware-mancala.png') type('image/png')
  );
  background-position: center calc(50% - 40px);
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 0.75;
}

#gameOver.modal::after {
  background-image: var(--gradient-spotlight), var(--gradient-vignette);
}

/* Sur un écran étroit, l'image du site s'agrandit (layout/page.css) : même règle. */
@media (max-width: 800px) {
  #gameOver.modal::before {
    background-size: 150%;
  }
}

#gameOver > .modal__panel {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100dvh;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;

  padding: calc(var(--space-md) + env(safe-area-inset-top, 0px)) var(--space-md)
           calc(var(--space-md) + env(safe-area-inset-bottom, 0px));

  border-radius: 0;
  box-shadow: none;

  /* Transparent : le décor du site, posé sur #gameOver, se voit à travers. */
  background: transparent;
}

/* Une colonne centrée, de la largeur de l'ancienne fenêtre. */
#gameOver > .modal__panel > * {
  width: 100%;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}

/* CENTRÉ DANS LA HAUTEUR, en solo comme en ligne (21/10/2026).
   « safe center » centre quand le contenu tient, et le colle en haut — défilant —
   quand il dépasse : un « center » simple couperait alors le haut. Les marges
   automatiques d'abord employées ne centraient pas quand le dernier élément
   était caché (la ligne de soutien du solo). Un navigateur qui ne connaît pas
   « safe » garde la ligne d'avant, « center ». */
#gameOver > .modal__panel {
  justify-content: center;
  justify-content: safe center;
}

/* --- Le titre et le score ----------------------------------------------------------- */
/* « Victoire ! » un peu plus gros (21/10/2026) : c'est le mot qu'on vient lire. */
#gameOver .modal__title {
  margin-bottom: var(--space-2xs);
  font-size: clamp(2rem, 8vw, 2.7rem);
}

#gameOver .game-over__score {
  margin-bottom: var(--space-2xs);
  font-size: clamp(1.8rem, 7vw, 2.4rem);
}

#gameOver .modal__text {
  margin-bottom: var(--space-sm);
}

/* --- L'Elo et les Cauris, plus serrés ---------------------------------------- */
#gameOver .elo-gain,
#gameOver .cauris-gain,
#gameOver .badge-gain,
#gameOver .net-stake-end {
  margin-bottom: var(--space-xs);
}

#gameOver .elo-gain,
#gameOver .cauris-gain {
  padding: var(--space-2xs) var(--space-sm);
}

/* Les trois blocs, de la même largeur : ils se lisent comme une seule colonne. */
#gameOver .elo-gain,
#gameOver .cauris-gain,
#gameOver .badge-gain {
  max-width: 21rem;
}

#gameOver .elo-gain__main {
  margin: 0;
}

#gameOver .elo-gain__value {
  font-size: clamp(1.7rem, 7vw, 2.1rem);
}

#gameOver .elo-gain__delta {
  font-size: 0.95rem;
}

#gameOver .elo-gain__bar {
  margin: 0.15em auto 0.2em;
}

#gameOver .elo-gain__record {
  margin-top: 0.25em;
  padding: 0.2em 0.7em;
}

#gameOver .cauris-gain__main {
  margin: 0;
}

#gameOver .cauris-gain__shell {
  width: 2rem;
  height: 2rem;
}

#gameOver .cauris-gain__value {
  font-size: clamp(1.6rem, 6.5vw, 2rem);
}

/* --- Les boutons ----------------------------------------------------------------- */
#gameOver .modal__actions {
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

/* Deux colonnes : « Rejouer » à côté de « Changer de niveau », « Revoir la
   partie » à côté de « Partager » — deux rangées au lieu de quatre. Un bouton
   seul sur sa rangée (les autres cachés) prend toute la largeur. */
#gameOver .modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#gameOver .modal__actions > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* « Revoir la partie » absent (abandon, partie non enregistrée, forfait avant
   le premier coup) : « Revenir à l'accueil » prend sa rangée entière plutôt que
   d'y rester seul sur une moitié. */
#gameOver .modal__actions > #btnWatchAgain[hidden] + #btnEndHome {
  grid-column: 1 / -1;
}

#gameOver .modal__actions .btn {
  width: 100%;
  min-width: 0;
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.98rem;
  line-height: 1.15;
  white-space: normal;
}

#gameOver .modal__actions [hidden] {
  display: none;
}