/* ════════════════════════════════════════════════════════════════════════════
   gameover-v4.css — Refonte de l'écran de fin de partie (v0.14)
   Scopé sous #gameover-backdrop : ne touche PAS le récap Daily (#daily-backdrop),
   qui garde l'ancien markup .go-* / .go-stats-row / .go-ach.
   Langage : carte beige, post-its/cartes tiltés, ombres dures, Syne/Archivo/Space
   Mono. Couleurs des 4 stats = couleurs HUD EN JEU (.stat-card[data-tone] de
   style.css). Logos partage = Simple Icons (X/WhatsApp/Facebook/Telegram) + Lucide
   (lien/image). Pastille « record » réutilisable, posable sur n'importe quelle stat.
   ════════════════════════════════════════════════════════════════════════════ */

/* Accent du mode « Partie rapide » (clé interne 'campagne') : vert, comme le HUD
   normal. Les autres modes gardent leur accent défini dans style.css. */
.go-card--campagne { --go-accent: var(--green); --go-accent-ink: var(--ink); }

/* Conteneur : compact, centré, colonne. (Base .go-card = paper/border/shadow/revealPop) */
#gameover-backdrop .go-card{
  max-width: 380px;
  padding: 14px 14px 14px;
  gap: 10px;
  align-items: center;
  text-align: center;
}

/* ── EN-TÊTE RUBAN (accent par mode) ─────────────────────────────────────── */
#gameover-backdrop .gov-ribbon{
  display:inline-flex; flex-direction:column; align-items:center; gap:1px;
  background:var(--go-accent, var(--green));
  color:var(--go-accent-ink, var(--ink));
  border:var(--border-thick);
  box-shadow:5px 5px 0 var(--ink);
  padding:7px 22px;
  transform:rotate(-2deg);
  margin-top:2px;
  animation:gov-popIn .45s var(--ease-pop) .05s both;
}
#gameover-backdrop .gov-tag{
  font-family:'Space Mono',monospace;
  font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
#gameover-backdrop .gov-title{
  font-family:var(--font-display);
  font-size:25px; line-height:.95; text-transform:uppercase; letter-spacing:-.01em;
}

/* ── PASTILLE RECORD réutilisable (posable sur n'importe quelle stat) ─────── */
#gameover-backdrop .gov-recpin{
  position:absolute; top:-10px; right:-10px; z-index:4;
  width:23px; height:23px;
  background:var(--yellow);
  border:2.5px solid var(--ink);
  box-shadow:1.5px 1.5px 0 var(--ink);
  display:flex; align-items:center; justify-content:center;
  transform:rotate(9deg);
  animation:gov-recPop .5s var(--ease-pop) .55s both, gov-recPulse 1.7s ease-in-out 1.3s infinite;
}
#gameover-backdrop .gov-recpin[hidden]{ display:none; }
#gameover-backdrop .gov-recpin svg{ width:14px; height:11px; display:block; }

/* ── STICKER SCORE (Points → couleur HUD violet #4b3cd1) ─────────────────── */
#gameover-backdrop .gov-score{
  position:relative;
  background:#4b3cd1;                 /* = .stat-card[data-tone="points"] (style.css) */
  border:3px solid var(--ink);
  box-shadow:var(--sh-md);
  padding:6px 18px 9px;
  max-width:100%;                     /* ne déborde jamais de la carte */
  text-align:center;
  transform:rotate(-2deg);
  animation:gov-scorePop .55s var(--ease-pop) .15s both;
}
#gameover-backdrop .gov-score-label{
  font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper); opacity:.85;
}
#gameover-backdrop .gov-score-val{
  display:block;
  font-family:'Syne',sans-serif; font-style:italic; font-weight:800;
  font-size:clamp(30px, 11vw, 50px);   /* responsive : tient sur les petits écrans (vraie Syne large) */
  line-height:.9; color:var(--paper); white-space:nowrap;
}
#gameover-backdrop .gov-score-prev{
  display:block;
  font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#cfc8f5; margin-top:2px;
}
#gameover-backdrop .gov-score-prev[hidden]{ display:none; }
#gameover-backdrop .gov-score-prev s{ opacity:.7; }

/* ── 3 CARTES PRINCIPALES (Série / Précision / Bulletins) — couleurs HUD ──── */
#gameover-backdrop .gov-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px; width:100%;
}
#gameover-backdrop .gov-chip{
  position:relative;
  min-width:0;                         /* autorise la cellule de grille à rétrécir (anti-débord) */
  border:3px solid var(--ink); box-shadow:var(--sh-sm);
  padding:7px 2px 6px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  color:var(--ink);
  animation:gov-chipIn .4s var(--ease-pop) both;
}
#gameover-backdrop .gov-chip-val{
  font-family:'Syne',sans-serif; font-style:italic; font-weight:800;
  font-size:21px; line-height:1;
}
#gameover-backdrop .gov-chip-lbl{
  font-family:'Space Mono',monospace;
  font-size:8px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  line-height:1; opacity:.82;
}
#gameover-backdrop .gov-chip--serie{ background:var(--orange); transform:rotate(-1.5deg); } /* tone streak */
#gameover-backdrop .gov-chip--acc  { background:var(--green);  transform:rotate(1.4deg); }  /* tone acc */
#gameover-backdrop .gov-chip--bull { background:var(--yellow); transform:rotate(-1.2deg); } /* tone bulletins */
#gameover-backdrop .gov-stats .gov-chip:nth-child(1){ animation-delay:.30s; }
#gameover-backdrop .gov-stats .gov-chip:nth-child(2){ animation-delay:.36s; }
#gameover-backdrop .gov-stats .gov-chip:nth-child(3){ animation-delay:.42s; }

/* ── SECTION STATISTIQUES ────────────────────────────────────────────────── */
#gameover-backdrop .gov-section{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:8px;
}
#gameover-backdrop .gov-section[hidden]{ display:none; }
/* titre de section = sticker encre tilté (langage .go-ach-head du jeu) */
#gameover-backdrop .gov-sectitle{
  display:inline-block; align-self:center;
  font-family:'Space Mono',monospace;
  font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 12px; background:var(--ink); color:var(--paper);
  transform:rotate(-1.5deg); margin-top:1px;
}

/* pilule mouvement (couleur = parti ; texte ink/paper selon luminance, posé en JS) */
#gameover-backdrop .gov-pill{
  display:inline-flex; align-items:center;
  border:2px solid var(--ink);
  font-family:'Space Mono',monospace;
  font-weight:700; font-size:9px; text-transform:uppercase; letter-spacing:.02em;
  padding:2px 6px; line-height:1.05; color:#fff;
  box-shadow:1.5px 1.5px 0 var(--ink);
  white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}

/* confusion : 1 post-it large */
#gameover-backdrop .gov-confusion{
  width:100%;
  background:var(--paper-3);
  border:3px solid var(--ink); box-shadow:var(--sh-sm);
  transform:rotate(-1deg);
  padding:6px 9px; font-size:9px;   /* base d'échelle : enfants en em, mis à l'échelle par fitGovConfusion pour tenir 1 ligne */
  display:flex; align-items:center; justify-content:center; gap:5px; flex-wrap:nowrap; overflow:hidden;
  animation:gov-chipIn .4s var(--ease-pop) .54s both;
}
/* confusion STRICTEMENT sur une ligne : libellé/flèche/×N fixes, pilules en em (échelle JS). */
#gameover-backdrop .gov-confusion .gov-conf-lbl,
#gameover-backdrop .gov-confusion .gov-arrow,
#gameover-backdrop .gov-confusion .gov-conf-x{ flex:0 0 auto; }
#gameover-backdrop .gov-confusion .gov-pill{ flex:0 0 auto; font-size:1em; }   /* largeur naturelle : le scale de la ligne garantit qu'elle tient, sans ellipse */
#gameover-backdrop .gov-confusion[hidden]{ display:none; }
#gameover-backdrop .gov-conf-lbl{
  font-family:'Space Mono',monospace;
  font-size:0.85em; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink);
}
#gameover-backdrop .gov-arrow{ font-family:var(--font-display); font-size:1.45em; line-height:1; }
#gameover-backdrop .gov-conf-x{
  font-family:'Syne',sans-serif; font-style:italic; font-weight:800; font-size:1.55em;
  background:var(--ink); color:var(--yellow); padding:0 5px;
}

/* mieux / moins bien : 2 cartes côte à côte */
#gameover-backdrop .gov-mmrow{ display:grid; grid-template-columns:1fr 1fr; gap:7px; width:100%; }
#gameover-backdrop .gov-mmrow[hidden]{ display:none; }
#gameover-backdrop .gov-mm{
  position:relative;
  min-width:0;                         /* la cellule 1fr ne se laisse plus élargir par son contenu */
  border:3px solid var(--ink); box-shadow:var(--sh-sm);
  padding:6px 7px; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:var(--paper);
}
/* La pilule mouvement est sur SA PROPRE ligne (pleine largeur de cellule) → de la
   place pour le nom entier (police ajustée par fitGovPills si besoin) ; le % en dessous. */
#gameover-backdrop .gov-mm .gov-pill{ max-width:100%; }
#gameover-backdrop .gov-mm-lbl{
  font-family:'Space Mono',monospace;
  font-size:7.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
#gameover-backdrop .gov-mm-pct{ align-self:center; }
#gameover-backdrop .gov-mm-pct{ font-family:'Syne',sans-serif; font-style:italic; font-weight:800; font-size:17px; line-height:1; }
#gameover-backdrop .gov-mm--best{ transform:rotate(-1.2deg); }
#gameover-backdrop .gov-mm--best .gov-mm-lbl{ color:#2a6b4a; }
#gameover-backdrop .gov-mm--best .gov-mm-pct{ color:var(--green-2, #2da567); }
#gameover-backdrop .gov-mm--worst{ transform:rotate(1.2deg); }
#gameover-backdrop .gov-mm--worst .gov-mm-lbl{ color:#8a3a3a; }
#gameover-backdrop .gov-mm--worst .gov-mm-pct{ color:var(--red); }

/* gauche / droite : carte bicolore scindée */
#gameover-backdrop .gov-gd{
  display:flex; width:100%; align-items:stretch;
  /* La couleur gauche/droite ET le séparateur central viennent du dégradé du
     CONTENEUR (il remplit toujours toute la boîte) → aucun liseré paper possible,
     quelle que soit la hauteur des moitiés. Les moitiés ne portent que le texte. */
  background:linear-gradient(to right,
    var(--m-gauche) 0 calc(50% - 1.5px),
    var(--ink)      calc(50% - 1.5px) calc(50% + 1.5px),
    var(--m-droite) calc(50% + 1.5px) 100%);
  border:3px solid var(--ink); box-shadow:var(--sh-sm);
  transform:rotate(-.8deg); overflow:hidden;
  animation:gov-chipIn .4s var(--ease-pop) .72s both;
}
#gameover-backdrop .gov-gd[hidden]{ display:none; }
#gameover-backdrop .gov-gd-half{
  flex:1; min-width:0; padding:6px 4px; text-align:center; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
}
#gameover-backdrop .gov-gd-g{ background:transparent; }   /* couleur portée par le dégradé du gd */
#gameover-backdrop .gov-gd-d{ background:transparent; }   /* séparateur central aussi dans le dégradé */
#gameover-backdrop .gov-gd-lbl{
  font-family:'Space Mono',monospace;
  font-size:7px; font-weight:700; letter-spacing:.01em; text-transform:uppercase;
  line-height:1.1; text-align:center; max-width:100%;
  white-space:nowrap;   /* 1 ligne → les 2 moitiés ont la MÊME hauteur, plus de liseré paper */
}
#gameover-backdrop .gov-gd-pct{ font-family:'Syne',sans-serif; font-style:italic; font-weight:800; font-size:17px; line-height:1; }

/* ── PARTAGE + ACTIONS ───────────────────────────────────────────────────── */
#gameover-backdrop .gov-actions{ width:100%; display:flex; flex-direction:column; gap:8px; margin-top:1px; }
#gameover-backdrop .gov-share{ display:flex; justify-content:center; align-items:center; gap:7px; flex-wrap:wrap; }
#gameover-backdrop .gov-share-lbl{
  font-family:'Space Mono',monospace;
  font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#8a7f55; margin-right:1px;
}
#gameover-backdrop .gov-sharebtn{
  width:32px; height:32px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--ink); box-shadow:var(--sh-sm); background:var(--paper);
  cursor:pointer; animation:gov-chipIn .4s var(--ease-pop) both;
  transition:transform .08s, box-shadow .08s;
}
#gameover-backdrop .gov-sharebtn svg{ width:15px; height:15px; display:block; }
#gameover-backdrop .gov-sharebtn--image{ background:var(--yellow); }   /* bouton image mis en avant */
#gameover-backdrop .gov-sharebtn.is-copied{ background:var(--green); }
#gameover-backdrop .gov-share .gov-sharebtn:nth-of-type(1){ transform:rotate(-3deg); animation-delay:.72s; }
#gameover-backdrop .gov-share .gov-sharebtn:nth-of-type(2){ transform:rotate(2deg);  animation-delay:.76s; }
#gameover-backdrop .gov-share .gov-sharebtn:nth-of-type(3){ transform:rotate(-2deg); animation-delay:.80s; }
#gameover-backdrop .gov-share .gov-sharebtn:nth-of-type(4){ transform:rotate(2.5deg);animation-delay:.84s; }
#gameover-backdrop .gov-share .gov-sharebtn:nth-of-type(5){ transform:rotate(-1.5deg);animation-delay:.88s; }
#gameover-backdrop .gov-share .gov-sharebtn:nth-of-type(6){ transform:rotate(2deg);  animation-delay:.92s; }
#gameover-backdrop .gov-sharebtn:active{ box-shadow:0 0 0 var(--ink); transform:translate(3px,3px) rotate(0); }

#gameover-backdrop .gov-ctarow{ display:flex; gap:8px; width:100%; }
#gameover-backdrop .gov-cta{
  flex:1; border:var(--border-thick);
  font-family:var(--font-display); font-size:14px; text-transform:uppercase; letter-spacing:.02em;
  padding:10px 6px; cursor:pointer; text-align:center; color:var(--ink);
  transition:transform .1s, box-shadow .1s;
}
#gameover-backdrop .gov-cta--replay{ background:var(--go-accent, var(--green)); box-shadow:var(--sh-md); transform:rotate(-1deg); flex:1.5; }
#gameover-backdrop .gov-cta--menu{ background:var(--paper-2); box-shadow:var(--sh-md); transform:rotate(1deg); }
#gameover-backdrop .gov-cta:active{ box-shadow:0 0 0 var(--ink); transform:translate(6px,6px) rotate(0); }

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes gov-popIn{ 0%{opacity:0; transform:scale(.6) rotate(-2deg);} 100%{opacity:1; transform:scale(1) rotate(-2deg);} }
@keyframes gov-scorePop{ 0%{opacity:0; transform:scale(.7) rotate(-2deg);} 100%{opacity:1; transform:scale(1) rotate(-2deg);} }
@keyframes gov-chipIn{ 0%{opacity:0; transform:scale(.7) translateY(6px);} 100%{opacity:1;} }
@keyframes gov-recPop{ 0%{opacity:0; transform:scale(0) rotate(9deg);} 60%{opacity:1; transform:scale(1.25) rotate(9deg);} 100%{opacity:1; transform:scale(1) rotate(9deg);} }
@keyframes gov-recPulse{ 0%,100%{transform:rotate(9deg) scale(1);} 50%{transform:rotate(9deg) scale(1.13);} }

/* Export image (bouton « image ») : image DROITE — on retire les rotations et les
   animations le temps de la capture. Le menu affiché en jeu garde ses tilts. */
/* transform:none !important suffit : dans la cascade CSS, une déclaration
   !important bat les animations → la capture est droite ET on ne coupe pas les
   animations (pas de re-pop de la carte au retrait de la classe). */
#gameover-backdrop .go-card.gov-exporting,
#gameover-backdrop .go-card.gov-exporting *{
  transform:none !important;
}

@media (prefers-reduced-motion:reduce){
  #gameover-backdrop .go-card *,
  #gameover-backdrop .go-card{ animation:none !important; }
}