/* =====================================================================
   IR2 — fenêtre de fin de partie (#874) : victoire ou défaite.
   Design validé le 06/11 (canevas Design « IR2 — interface autour de la carte », rangée « Fin de partie »).
   Tout est rangé sous `dialog.fin-partie` (préfixe `fp-`). Les chemins `img/…` de la maquette
   correspondent aux fichiers du dépôt indiqués dans LISEZMOI.md.
   La variante se choisit par une classe sur le <dialog> : `victoire` ou `defaite`.
   ===================================================================== */

dialog.fin-partie {
  --fp-filet: #b8923a; --fp-or-vif: #f1d98c; --fp-parchemin: #e8d6a8; --fp-creme: #f3e6c4;
  --fp-vert: #3d5a0c; --fp-rouge: #6a1812;
  --serif: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --chiffres: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  position: fixed; inset: 0; margin: auto; height: fit-content;
  width: min(800px, 94vw); padding: 0; overflow: visible;
  background: #1a110b; color: #e8e0d0;
  border: 2px solid var(--fp-filet); border-radius: 3px;
  outline: 1px solid rgba(184,146,58,.5); outline-offset: 4px;
  box-shadow: 0 0 0 1px #000, 0 0 0 6px rgba(0,0,0,.45), 0 24px 70px rgba(0,0,0,.85);
  font: 14px/1.45 "Segoe UI", system-ui, sans-serif;
}
/* La fenêtre est modale (showModal) : la carte reste visible, assombrie et floutée. */
dialog.fin-partie::backdrop { background: rgba(8,5,3,.62); backdrop-filter: blur(3px) saturate(.8); }

/* ---- ornements ---- */
.fp-coin { position: absolute; width: 64px; z-index: 4; pointer-events: none; }
.fp-coin.hg { left: -14px; top: -14px; } .fp-coin.hd { right: -14px; top: -14px; }
.fp-coin.bg { left: -14px; bottom: -14px; } .fp-coin.bd { right: -14px; bottom: -14px; }
.fp-aigle { position: absolute; left: 50%; top: -86px; transform: translateX(-50%); width: 168px; z-index: 5; filter: drop-shadow(0 6px 10px rgba(0,0,0,.75)); pointer-events: none; }

/* ---- bandeau ---- */
.fp-bandeau { position: relative; padding: 70px 24px 16px; text-align: center; border-bottom: 2px solid var(--fp-filet);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.65), inset 0 -14px 24px rgba(0,0,0,.35);
  background: radial-gradient(ellipse at 50% 0%, rgba(147,41,29,.35) 0%, rgba(106,24,18,.25) 48%, rgba(30,4,3,.6) 100%), url("../assets/combat/marbre-rouge.jpg") center / cover; }
.fp-titre { margin: 0; font: 900 54px/1 var(--serif); letter-spacing: .16em; text-transform: uppercase;
  color: #f6dd8a; text-shadow: 0 2px 0 #7a5a12, 0 4px 10px rgba(0,0,0,.7), 0 0 24px rgba(241,217,140,.45); }
.fp-sous-titre { margin-top: 6px; font: 600 15px/1.3 var(--serif); letter-spacing: .06em; color: var(--fp-creme); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.fp-contexte { margin-top: 4px; font-size: 13px; color: #e0cfa6; }

/* ---- scène : portraits sur le panorama ---- */
.fp-scene { position: relative; height: 200px; display: flex; align-items: center; justify-content: center; gap: 46px; border-bottom: 2px solid var(--fp-filet);
  background: radial-gradient(ellipse at 50% 55%, rgba(20,10,5,.05), rgba(20,10,5,.6) 100%), linear-gradient(rgba(25,14,8,.35), rgba(25,14,8,.35)), url("../assets/combat/panorama.jpg") center / cover; }
.fp-camp { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 170px; text-align: center; }
.fp-camp .fp-nom { font: 700 14px/1.2 var(--serif); color: var(--fp-creme); }
.fp-camp .fp-role { font-size: 12px; color: #d9c79b; }
.fp-camp.moi .fp-vous { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #d9c79b; }
.fp-camp.moi .fp-nom { font-size: 22px; color: #f6dd8a; text-shadow: 0 2px 4px rgba(0,0,0,.8); }
.fp-camp.moi .fp-role { font-size: 13px; color: var(--fp-creme); }
.fp-autres { display: flex; align-items: flex-start; justify-content: flex-end; gap: 10px; width: 170px; }
.fp-autres:empty { visibility: hidden; }
.fp-scene.dense .fp-autres { width: auto; }
.fp-scene.dense { gap: 26px; }
.fp-scene.dense .fp-camp.moi { width: 150px; }
.fp-camp.autre { opacity: .9; }
.fp-camp.autre.vainqueur { opacity: 1; }
.fp-autres .fp-camp { width: 104px; }
/* portrait : fond = couleur de la puissance (variable --fp-couleur), buste, cadre de laurier par-dessus */
.fp-portrait { position: relative; width: 84px; height: 84px; display: block; }
.fp-portrait .fond { position: absolute; inset: 12px; overflow: hidden; border-radius: 50%; background: var(--fp-couleur, #555); }
.fp-portrait .fond img { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); width: 92%; }
.fp-portrait .cadre { position: absolute; inset: 0; width: 100%; height: 100%; }
.fp-portrait.grand { width: 190px; height: 190px; }
.fp-portrait.grand .fond { inset: 26px; box-shadow: inset 0 0 18px rgba(0,0,0,.6); }
.fp-portrait.grand .fond img { width: auto; height: 112%; bottom: -4px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.fp-portrait.grand .cadre { inset: 14px; width: 162px; height: 162px; }
.fp-portrait .couronne { position: absolute; left: -22px; top: -16px; width: 234px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.7)); }
.fp-camp.autre.vaincu { opacity: .75; }
.fp-camp.autre.vaincu .fp-portrait .fond img { filter: grayscale(1) brightness(.6); }

/* ---- conditions ---- */
.fp-corps { padding: 20px 26px 6px; display: flex; flex-direction: column; gap: 12px; }
.fp-rubrique { display: flex; align-items: center; gap: 12px; }
.fp-rubrique img { width: 34px; }
.fp-rubrique h2 { margin: 0; font: 700 15px/1.2 var(--serif); letter-spacing: .1em; text-transform: uppercase; color: var(--fp-or-vif); }
.fp-rubrique::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--fp-filet), transparent); }
.fp-conditions { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
dialog.fin-partie.defaite .fp-conditions { grid-template-columns: repeat(2, minmax(0,1fr)); }
.fp-tuile { padding: 12px 14px 8px; border: 1px solid var(--fp-filet); border-left: 5px solid var(--fp-couleur, var(--fp-filet));
  box-shadow: inset 0 0 0 1px rgba(60,40,10,.4), 0 2px 6px rgba(0,0,0,.45);
  background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.4)), #f1eee7 url("../assets/ui/fond-marbre-blanc.jpg") center / cover; }
.fp-tuile.manquee { border-color: #8a7a5a; }
.fp-tuile-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.fp-tuile-tete b { font: 700 16px/1.2 var(--serif); }
.fp-etat { font: 700 11px/1 var(--serif); letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; color: #fbf0d0; background: var(--fp-vert); border: 1px solid #c9a24a; }
.fp-tuile.manquee .fp-etat { color: #fbe3dc; background: var(--fp-rouge); border-color: #8a7a5a; }
.fp-condition { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 4px 10px; align-items: start; padding: 6px 0; border-top: 1px solid rgba(90,60,20,.25); }
.fp-signe { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 15px/1 var(--serif); color: #fff;
  background: radial-gradient(circle at 35% 30%, #6f8f1c, #2f4a06); box-shadow: 0 0 0 2px #c9a24a, 0 1px 3px rgba(0,0,0,.5); }
.fp-condition.non .fp-signe { background: radial-gradient(circle at 35% 30%, #9a3226, #4a120e); box-shadow: 0 0 0 2px #8a7a5a, 0 1px 3px rgba(0,0,0,.5); }
.fp-texte { font-size: 14px; font-weight: 600; color: #2a1d10; }
.fp-preuve { grid-column: 2; font-size: 13px; font-style: italic; color: #5a4632; }

/* ---- bilan sur bois ---- */
.fp-bilan { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 2px solid var(--fp-filet); box-shadow: inset 0 0 0 1px #000;
  background: linear-gradient(rgba(12,6,2,.25), rgba(12,6,2,.4)), #1f160d url("../assets/ui/fond-bois.jpg") center / 320px; }
.fp-bilan > div { padding: 10px 12px; text-align: center; border-right: 1px solid rgba(184,146,58,.4); }
.fp-bilan > div:last-child { border-right: 0; }
.fp-bilan .l { font: 600 11px/1.2 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: #d9c79b; }
.fp-bilan .v { font: 700 30px/1.1 var(--chiffres); color: #fbf0d0; }

/* ---- note et pied ---- */
.fp-note { margin: 14px 26px 0; padding: 9px 14px; display: flex; align-items: center; gap: 12px; background: rgba(40,10,8,.45); border: 1px solid rgba(226,194,117,.35); border-radius: 3px; font-size: 13px; color: var(--fp-parchemin); }
.fp-note img { width: 54px; flex: 0 0 auto; }
.fp-note b { color: var(--fp-creme); }
.fp-pied { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 24px 14px; background: linear-gradient(#1d140d, #120c08); border-top: 2px solid var(--fp-filet); }
/* boutons : le cadre doré à lauriers du jeu (mêmes images et mêmes réglages que les boutons du combat) */
.fp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 150px; min-height: 22px; padding: 0 8px; cursor: pointer;
  font: 600 15px/20px var(--serif); color: #f3e6bd; text-shadow: 0 1px 2px rgba(0,0,0,.8);
  border: solid transparent; border-width: 14px 24px; border-radius: 22px;
  border-image: url("../assets/combat/bouton-pierre.png") 30 50 / 14px 24px stretch; background: linear-gradient(#42311f, #241a0e);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
.fp-btn.vert { color: #fbf0d0; border-image: url("../assets/combat/bouton-vert.png") 30 50 / 14px 24px stretch; background: linear-gradient(#496310, #203a02); }
.fp-btn:hover { filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)) brightness(1.18); }
.fp-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ================= variante DÉFAITE : la même fenêtre en deuil ================= */
dialog.fin-partie.defaite .fp-bandeau {
  background: linear-gradient(rgba(25,22,22,.55), rgba(10,8,8,.75)), url("../assets/combat/marbre-rouge.jpg") center / cover; }
dialog.fin-partie.defaite .fp-bandeau::before { /* le marbre rouge passe au gris sans toucher au texte */
  content: ""; position: absolute; inset: 0; backdrop-filter: grayscale(.85); pointer-events: none; }
dialog.fin-partie.defaite .fp-titre { color: #d8d2c6; text-shadow: 0 2px 0 #4a4640, 0 4px 10px rgba(0,0,0,.8); }
dialog.fin-partie.defaite .fp-scene {
  background: radial-gradient(ellipse at 50% 55%, rgba(10,10,10,.2), rgba(5,5,5,.75) 100%), linear-gradient(rgba(20,18,16,.5), rgba(20,18,16,.5)), url("../assets/combat/panorama.jpg") center / cover; }
dialog.fin-partie.defaite .fp-camp.moi .fp-nom { color: #c9d3ea; }
dialog.fin-partie.defaite .fp-portrait.grand .fond img { filter: grayscale(.85) brightness(.75) drop-shadow(0 2px 3px rgba(0,0,0,.6)); }

/* ---- ajouts du portage (#874) : nom de tuile teinté par la puissance, emblème quand le chef na pas de buste ---- */
.fp-tuile-tete b { color: color-mix(in srgb, var(--fp-couleur, #8a6a08) 62%, #000); }
.fp-portrait .fond svg { position: absolute; left: 50%; top: 50%; width: 52%; height: 52%; transform: translate(-50%, -50%); color: #f3e6bd; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }

/* Écran bas ou plusieurs tuiles : la fenêtre garde une marge pour l aigle qui déborde, le corps défile (le pied reste visible). */
dialog.fin-partie[open] { display: flex; flex-direction: column; max-height: calc(100vh - 190px); }
.fp-corps { min-height: 0; overflow-y: auto; scrollbar-color: #b8923a #1a110b; }
.fp-bandeau, .fp-scene, .fp-note, .fp-pied { flex: 0 0 auto; }
.fp-tuile-tete { flex-wrap: wrap; } .fp-etat { white-space: nowrap; }