/* Écran de fin (match en ligne, entraînement) : une vraie page de résultat qui remplit
   tout l'écran 4:3, sans carte ni cadre intérieur. Le résultat se révèle en plusieurs temps comme
   un écran d'arcade : bandeau, titre qui claque, face-à-face et score qui défile (game.js), stats
   une à une, puis les choix. Jetons --screen-* uniquement (sombre / sable clair, thèmes). */

.endgame-overlay {
  position: absolute;
  inset: 0;
  z-index: 22;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2.4cqh, 16px);
  overflow: hidden;
  background: var(--screen-bg);
  animation: arcade-screen-open 220ms steps(6) backwards;
}

.endgame-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: clamp(8px, 1.8cqh, 14px);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(12px, 2.6cqh, 20px) clamp(16px, 3.8cqw, 34px) clamp(10px, 2.2cqh, 18px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--screen-ink);
  font-family: 'Jersey 15', sans-serif;
  text-align: center;
  animation: none;
}

/* Le résultat se centre dans l'espace restant tandis que le pied conserve une position stable,
   quels que soient les blocs optionnels (XP, défis, statut de revanche). */
.endgame-content {
  display: grid;
  align-content: safe center;
  justify-items: center;
  gap: clamp(6px, 1.5cqh, 11px);
  width: 100%;
  min-height: 0;
  overflow-y: auto;
}

/* ---- Titre */
.endgame-banner { display: grid; justify-items: center; gap: clamp(2px, .8cqh, 6px); min-width: 0; }
.endgame-kicker {
  color: var(--screen-mint);
  font: clamp(13px, 2.4cqh, 17px)/1 'PixelArt', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  animation: endgame-rise 200ms steps(4) 140ms backwards;
}
.endgame-title {
  margin: 0;
  color: var(--screen-accent);
  font: clamp(46px, 11.5cqh, 88px)/.9 'Jersey 15', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 3px 3px 0 var(--screen-shadow), 0 0 26px color-mix(in srgb, var(--screen-accent) 34%, transparent);
  animation: endgame-slam 380ms steps(7) 200ms backwards, endgame-flash 260ms steps(2) 640ms 3;
}
.endgame-overlay:is(.is-loss, .is-neutral) .endgame-title {
  color: var(--screen-ink);
  text-shadow: 3px 3px 0 var(--screen-shadow);
  animation: endgame-drop 420ms steps(7) 200ms backwards;
}
.endgame-kicker[hidden] { display: none; }

/* ---- Face-à-face : portraits clonés du tableau des scores, de part et d'autre du score. */
.endgame-versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 2.4cqw, 22px);
  width: 100%;
  min-height: clamp(116px, 23cqh, 158px);
}
/* En 2v2, les quatre bulles ont besoin de leur propre bande entre le titre et les portraits. */
.endgame-versus:has(.arcade-score-roster.is-doubles) { min-height: clamp(148px, 30cqh, 198px); }
/* Les deux camps en pleine couleur : le perdant se reconnaît à son blob tassé et à son nom en
   retrait, pas à un voile gris. */
.endgame-team {
  width: 100%;
  min-width: 0;
  animation: endgame-rise 220ms steps(4) 320ms backwards;
}
.endgame-team:not(.is-winner) .arcade-score-name { color: var(--screen-muted); }
.endgame-team[data-endgame-team='left'] { justify-self: end; }
.endgame-team[data-endgame-team='right'] { justify-self: start; }
.endgame-team .arcade-score-roster { display: grid; justify-items: center; gap: 4px; width: 100%; }
.endgame-team .arcade-score-roster.is-doubles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(4px, 1cqw, 10px); }
.endgame-team .arcade-score-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: clamp(3px, .8cqh, 6px);
  width: 100%;
  min-width: 0;
  color: var(--screen-ink);
  font: clamp(20px, 3.8cqh, 27px)/1 'Jersey 15', sans-serif;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: none;
}
.endgame-team[data-endgame-team='left'] .arcade-score-player { flex-direction: column; text-align: center; }
.endgame-team.is-winner .arcade-score-name { color: var(--screen-accent); }
.endgame-team .arcade-score-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.endgame-overlay .endgame-team .arcade-score-portrait { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: clamp(84px, 17cqh, 116px); height: clamp(84px, 17cqh, 116px); }
.endgame-overlay .endgame-team .arcade-score-portrait::before { content: none; }
.endgame-team[data-endgame-team='left'] .arcade-score-portrait { transform: scaleX(-1); }
.endgame-overlay .endgame-team .arcade-score-portrait img { width: 120%; height: 120%; object-fit: contain; image-rendering: pixelated; translate: 0 -17%; }
.endgame-overlay .endgame-team .arcade-score-roster.is-doubles .arcade-score-player { font-size: clamp(17px, 3.1cqh, 22px); }
.endgame-overlay .endgame-team .arcade-score-roster.is-doubles .arcade-score-portrait { width: clamp(88px, 16cqh, 112px); height: clamp(88px, 16cqh, 112px); }
.endgame-overlay .endgame-team .arcade-score-roster.is-doubles .arcade-score-portrait img { width: 120%; height: 120%; translate: 0 -17%; }
/* Animation de fin choisie dans MON BLOBBY (end-animations.js) : 120 × 150 px de texture, pieds sur
   la même ligne que l'image qu'elle remplace (120 %, remontée de 17 %), la place au-dessus pour les
   sauts et les effets. */
.endgame-overlay .endgame-team .arcade-score-portrait .endgame-portrait-animation {
  position: absolute; left: -10%; top: -58.4%; width: 120%; height: 150%;
  image-rendering: pixelated; pointer-events: none;
}

/* Les blobs vivent une fois le résultat posé : le gagnant sautille, le perdant reste tassé et
   respire lentement. En pas (steps) pour rester pixel. Les coéquipiers sont décalés pour ne pas
   sauter en même temps. */
.endgame-team .arcade-score-portrait img { transform-origin: 50% 100%; }
.endgame-team.is-winner .arcade-score-portrait img { animation: endgame-hop 760ms steps(8) 1300ms infinite; }
.endgame-team.is-winner .arcade-score-player:nth-child(2) .arcade-score-portrait img { animation-delay: 1680ms; }
/* Perdant : le même soupir que sur un point perdu en match (game.js POINT_REACTION_TRACKS.lose,
   1 s), rejoué en boucle avec une pause. Il penche vers son camp, comme sur le terrain. */
.endgame-team:not(.is-winner) .arcade-score-portrait img { animation: endgame-sigh 2200ms ease-in-out 1300ms infinite; }
.endgame-team .arcade-score-player.is-emoting .arcade-score-portrait img {
  animation: endgame-talk 620ms steps(5) infinite;
}
.endgame-team[data-endgame-team='left'] { --lean-dir: 1; }
.endgame-team[data-endgame-team='right'] { --lean-dir: -1; }
@keyframes endgame-hop {
  0%, 100% { transform: scale(1.1, .88); }
  15% { transform: scale(.94, 1.08) translateY(-10%); }
  45% { transform: scale(1, 1) translateY(-34%); }
  75% { transform: scale(.96, 1.05) translateY(-8%); }
  90% { transform: scale(1.08, .9); }
}
@keyframes endgame-sigh {
  0%, 45.5%, 100% { transform: none; }
  4.1% { transform: scale(.97, 1.06); }
  8.2% { transform: scale(.98, 1.04); }
  19.5% { transform: scale(1.04, .86); }
  23.2% { transform: scale(1.04, .86) rotate(calc(5deg * var(--lean-dir, 1))); }
  27.3% { transform: scale(1.04, .86) rotate(calc(-5deg * var(--lean-dir, 1))); }
  31.4% { transform: scale(1.04, .87) rotate(calc(3deg * var(--lean-dir, 1))); }
  35% { transform: scale(1.04, .87); }
}
/* Quand une bulle est affichée, le blob reste au sol et « parle » avec un petit rebond. Le grand
   saut de victoire reprendra dès que game.js retire .is-emoting à la disparition de l'emote. */
@keyframes endgame-talk {
  0%, 100% { transform: scale(1.04, .94); }
  40% { transform: scale(.98, 1.02); }
  70% { transform: scale(1.02, .97); }
}
/* Confettis pixel sur une victoire (game.js launchEndgameConfetti) : par-dessus la page, sans clic. */
.endgame-confetti { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }

.endgame-scoreboard {
  display: flex;
  align-items: baseline;
  gap: .22em;
  color: var(--screen-ink);
  font: clamp(62px, 14cqh, 100px)/.85 'Jersey 15', sans-serif;
  font-variant-numeric: tabular-nums;
  text-shadow: 3px 3px 0 var(--screen-shadow);
  animation: endgame-rise 200ms steps(4) 320ms backwards;
}

/* Les messages de courtoisie de fin sont ancrés par game.js aux portraits ci-dessus. Leur format
   reste celui d'une bulle de match, simplement un peu plus compact pour laisser respirer le titre. */
body:has(#endgame-overlay[style*='flex']) .game-emote-bubble {
  max-width: min(16rem, 30%);
  font-size: clamp(1.15rem, 3.6cqh, 1.6rem);
}
.endgame-score { min-width: 1.1ch; }
.endgame-score:first-child { text-align: right; }
.endgame-score.is-winner { color: var(--screen-accent); }
.endgame-score-sep { color: var(--screen-muted); font-size: .6em; }

/* ---- Stats, une à une */
.endgame-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  padding-block: clamp(8px, 2cqh, 14px);
  border-block: 1px solid var(--screen-line);
}
.endgame-stat {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 0 8px;
  animation: endgame-rise 200ms steps(4) backwards;
  animation-delay: calc(600ms + var(--i, 0) * 90ms);
}
.endgame-stat + .endgame-stat { border-left: 1px solid var(--screen-line); }
.endgame-stat-label {
  overflow: hidden;
  color: var(--screen-muted);
  font: clamp(12px, 2.3cqh, 15px)/1 'Jersey 15', sans-serif;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.endgame-stat-value { color: var(--screen-ink); font: clamp(22px, 4.6cqh, 30px)/1 'Jersey 15', sans-serif; font-weight: normal; }

/* ---- Progression du compte (en ligne) : jauge, NIVEAU N !, détail, objet débloqué. */
.endgame-xp {
  display: grid;
  justify-items: center;
  gap: clamp(4px, 1.2cqh, 8px);
  width: 100%;
  animation: endgame-rise 200ms steps(4) 950ms backwards;
}
.endgame-xp[hidden] { display: none; }
.endgame-xp-head { display: flex; align-items: center; gap: 10px; width: min(100%, 460px); }
.endgame-xp-level { color: var(--screen-muted); font: clamp(15px, 2.9cqh, 19px)/1 'Jersey 15', sans-serif; letter-spacing: .06em; white-space: nowrap; }
.endgame-xp-level.is-next { color: var(--screen-ink); }
.endgame-xp-bar {
  position: relative;
  flex: 1;
  min-width: 60px;
  height: clamp(10px, 2cqh, 14px);
  overflow: hidden;
  background: var(--screen-raised);
  border: 1px solid var(--screen-line);
}
.endgame-xp-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--screen-mint); }
.endgame-xp-bar i.is-animated { transition: width 500ms steps(10); }
.endgame-xp-gain { color: var(--screen-accent); font: clamp(18px, 3.4cqh, 22px)/1 'Jersey 15', sans-serif; font-weight: normal; white-space: nowrap; }
.endgame-xp-detail { color: var(--screen-muted); font: clamp(13px, 2.4cqh, 16px)/1 'Jersey 15', sans-serif; letter-spacing: .08em; }
.endgame-xp-levelup { min-height: 1em; color: var(--screen-accent); font: clamp(26px, 5.6cqh, 38px)/1 'Jersey 15', sans-serif; font-weight: normal; letter-spacing: .06em; text-shadow: 0 2px var(--screen-shadow); }
.endgame-xp-levelup:empty { display: none; }
.endgame-xp.is-level-up .endgame-xp-levelup { animation: endgame-xp-pop 360ms steps(4) backwards; }
.endgame-xp.is-level-up .endgame-xp-bar { animation: endgame-xp-flash 300ms steps(2); }
@keyframes endgame-xp-pop { from { transform: scale(1.6); opacity: 0; } }
@keyframes endgame-xp-flash { 50% { background: var(--screen-accent); } }
.endgame-challenges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.endgame-challenges[hidden] { display: none; }
.endgame-challenge {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 2px 10px;
  border-left: 3px solid transparent;
  animation: endgame-rise 200ms steps(4) backwards;
  animation-delay: calc(1100ms + var(--i, 0) * 90ms);
}
.endgame-challenge + .endgame-challenge { box-shadow: -1px 0 var(--screen-line); }
/* The tier is for screen readers only here: the end screen is short on height. */
.endgame-challenge-tier { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.endgame-challenge-label {
  overflow: hidden;
  color: var(--screen-ink);
  font: clamp(14px, 2.8cqh, 17px)/1.1 'Jersey 15', sans-serif;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.endgame-challenge-status { color: var(--screen-muted); font: clamp(14px, 2.7cqh, 18px)/1 'Jersey 15', sans-serif; font-weight: normal; letter-spacing: .06em; }
.endgame-challenge.is-done .endgame-challenge-status { color: var(--screen-mint); }
.endgame-challenge.is-new { border-left-color: var(--screen-accent); background: var(--screen-tint); }
.endgame-challenge.is-new .endgame-challenge-status { color: var(--screen-accent); }
.endgame-challenge.is-online-only { opacity: .55; }
.endgame-xp-unlock {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-left: 3px solid var(--screen-accent);
  background: var(--screen-tint);
  animation: endgame-rise 200ms steps(4) backwards;
}
.endgame-xp-unlock-kicker { color: var(--screen-mint); font: clamp(13px, 2.4cqh, 16px)/1 'Jersey 15', sans-serif; letter-spacing: .1em; }
.endgame-xp-unlock-preview { width: 40px; height: 40px; image-rendering: pixelated; }
.endgame-xp-unlock-swatch { width: 22px; height: 22px; background: var(--unlock-color); border: 1px solid var(--screen-line); }
.endgame-xp-unlock-name { color: var(--screen-ink); font: clamp(18px, 3.4cqh, 22px)/1 'Jersey 15', sans-serif; font-weight: normal; }
.endgame-xp-prestige { color: var(--screen-accent); font: clamp(15px, 2.8cqh, 18px)/1 'Jersey 15', sans-serif; letter-spacing: .06em; }
.endgame-xp.is-guest { gap: 6px; }
.endgame-xp-guest-title { color: var(--screen-accent); font: clamp(20px, 4cqh, 26px)/1 'Jersey 15', sans-serif; font-weight: normal; letter-spacing: .08em; text-transform: uppercase; }
.endgame-xp-guest-copy { color: var(--screen-muted); font: clamp(15px, 2.8cqh, 18px)/1.2 'Jersey 15', sans-serif; }
.endgame-xp-signup.endgame-button { min-height: 36px; font-size: clamp(18px, 3.4cqh, 22px); color: var(--screen-accent); }
.endgame-xp-signup.endgame-button:is(:hover, :focus-visible) { background: var(--screen-tint); }
@media (prefers-reduced-motion: reduce) {
  .endgame-team .arcade-score-portrait img,
  .endgame-team .arcade-score-player.is-emoting .arcade-score-portrait img { animation: none; }
  .endgame-confetti { display: none; }
  .endgame-xp, .endgame-xp-unlock, .endgame-xp.is-level-up .endgame-xp-levelup, .endgame-xp.is-level-up .endgame-xp-bar { animation: none; }
  .endgame-xp-bar i.is-animated { transition: none; }
}

/* ---- Choix. Rien n'est cliquable avant .is-ready (fin de la révélation, game.js). */
.endgame-footer {
  display: grid;
  grid-template-rows: auto clamp(19px, 3.6cqh, 24px);
  justify-items: center;
  width: 100%;
  flex: none;
}
.endgame-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  padding-top: clamp(2px, 1cqh, 8px);
  animation: endgame-rise 220ms steps(4) 1080ms backwards;
}
.endgame-overlay:not(.is-ready) .endgame-actions { pointer-events: none; }
.endgame-button {
  position: relative;
  min-height: clamp(42px, 8cqh, 56px);
  padding: 0 clamp(16px, 3cqw, 26px);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--screen-ink);
  font: clamp(22px, 4.3cqh, 28px)/1 'Jersey 15', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 100ms, background-color 100ms, transform 80ms;
}
/* Choix principal (Revanche / Rejouer) : le gros bouton doré à relief pixel. */
.endgame-button.is-primary {
  min-width: clamp(180px, 34cqw, 260px);
  min-height: clamp(48px, 9.5cqh, 64px);
  background: var(--screen-accent);
  color: var(--screen-accent-ink);
  font-size: clamp(26px, 5.2cqh, 34px);
  box-shadow:
    inset -4px -4px color-mix(in srgb, var(--screen-accent) 68%, #000),
    inset 4px 4px color-mix(in srgb, var(--screen-accent) 58%, #fff),
    0 5px var(--screen-shadow);
}
.endgame-overlay .endgame-button:is(:focus, :focus-visible) { outline: none; }
/* Sélection : le curseur d'écran (arcade-ui.css) ; teinte sur le choix texte, relief éclairci sur
   le bouton principal. À la manette, le focus programmatique compte aussi. */
.endgame-button.is-primary { --cursor-gap: -7px; }
.is-gamepad .endgame-button:focus::after { opacity: 1; animation: arcade-cursor-in 140ms steps(3) backwards, arcade-cursor-breathe 900ms steps(2, jump-none) 140ms infinite alternate; }
.endgame-button:not(.is-primary):is(:focus-visible, :hover),
.is-gamepad .endgame-button:not(.is-primary):focus {
  color: var(--screen-accent);
  background: var(--screen-tint);
  box-shadow: none;
}
.endgame-button.is-primary:is(:focus-visible, :hover),
.is-gamepad .endgame-button.is-primary:focus {
  background: color-mix(in srgb, var(--screen-accent) 84%, #fff);
  transform: translateY(-2px);
}
.endgame-button.is-primary:active { transform: translateY(3px); box-shadow: inset -4px -4px color-mix(in srgb, var(--screen-accent) 68%, #000), inset 4px 4px color-mix(in srgb, var(--screen-accent) 58%, #fff), 0 1px var(--screen-shadow); }

/* Revanche : j'ai voté (Prêt !), un autre joueur attend (le bouton appelle), plus possible. */
#endgame-rematch[data-state='ready'] {
  background: var(--screen-panel);
  color: var(--screen-mint);
  box-shadow: inset 0 0 0 3px var(--screen-mint), 0 5px var(--screen-shadow);
}
#endgame-rematch[data-state='called'] { animation: endgame-call 700ms steps(2) infinite; }
#endgame-rematch:disabled {
  background: var(--screen-raised);
  color: var(--screen-muted);
  box-shadow: none;
  cursor: default;
  transform: none;
}
.endgame-rematch-status {
  min-height: 1.2em;
  margin: 0;
  color: var(--screen-muted);
  font: clamp(16px, 3cqh, 19px)/1.2 'Jersey 15', sans-serif;
  letter-spacing: .04em;
}
.endgame-rematch-status[data-state='called'] { color: var(--screen-mint); animation: endgame-blink 1s steps(2) infinite; }
.endgame-rematch-status:empty { visibility: hidden; }

@keyframes endgame-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes endgame-slam {
  0% { opacity: 0; transform: scale(2.6); }
  55% { opacity: 1; transform: scale(.9); }
  100% { transform: none; }
}
@keyframes endgame-drop {
  0% { opacity: 0; transform: translateY(-45%); }
  70% { opacity: 1; transform: translateY(6%); }
  100% { transform: none; }
}
@keyframes endgame-flash { 50% { color: var(--screen-ink); } }
@keyframes endgame-call { 50% { background: color-mix(in srgb, var(--screen-accent) 78%, #fff); transform: scale(1.05); } }
@keyframes endgame-blink { 50% { opacity: .45; } }

/* Écran de jeu bas ou étroit (téléphone, petite fenêtre) : contenu compact qui tient sans défiler. */
@media (max-height: 480px), (max-width: 520px) {
  .endgame-overlay { padding: 6px; }
  .endgame-card { gap: 5px; padding: 8px 10px; }
  .endgame-content { gap: 5px; }
  .endgame-versus { min-height: 94px; }
  .endgame-overlay .endgame-team .arcade-score-portrait { width: clamp(62px, 16cqh, 82px); height: clamp(62px, 16cqh, 82px); }
  .endgame-overlay .endgame-team .arcade-score-roster.is-doubles .arcade-score-portrait { width: clamp(58px, 14cqh, 72px); height: clamp(58px, 14cqh, 72px); }
  .endgame-team .arcade-score-name { display: none; }
  .endgame-stat { padding: 0 4px; }
  .endgame-actions { gap: 8px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .endgame-overlay, .endgame-card, .endgame-card *, .endgame-button { animation: none !important; transition: none; }
}