/* ═══════════════ L'ÉCRAN DE FIN ET LA REVANCHE (.bd-fin, js/br/fin.js) ═══════════════
   Tous les modes sauf la battle royale. Max, 02/10 : « un podium clair ; en 2 VS 2 les 2 premiers et les 2 autres
   2nd ; les statistiques ; l'Elo en dessous, comme Brawlhalla » ; « l'Elo de tout le monde, avant → après » ; « les
   paliers visibles ». La mise en scène des références de Max (des colonnes-podiums posées au sol, une par joueur, les
   gagnants plus haut sur une colonne plus riche, une carte de stats sur chaque colonne) dans la patte de BallDash : gros
   traits d'encre, ombres décalées sans flou, capitales italiques, l'or pour l'action principale (« Revanche »), et les
   couleurs de l'écran de fin d'aujourd'hui (or : victoire ; rouge : défaite ; violet : égalité ou spectateur).
   Deux mises en page, les mêmes mots et les mêmes informations (RANKED-CONCEPTION.md §2.1) :
     • LARGE (ordinateur) : tout en --u, qui vaut 10 px à 1 920 × 1 080 et suit la plus petite des deux dimensions ;
     • COMPACTE (téléphone en paysage, et toute fenêtre de 520 px de haut ou moins) : tout en --q, qui vaut 1 px à
       667 × 300 (le pire téléphone) et grandit avec l'écran ; des cibles de 44 px, aucun texte sous 12 px, les
       encoches respectées.
   Les boutons ne bougent jamais : « Salon » puis « Revanche » (or), en bas à droite, sur PC comme au téléphone ; la
   ligne d'état au-dessus d'eux a une hauteur FIXE (deux lignes), pour que rien ne saute quand son texte change.
   Tout est sous .bd-fin : rien ici ne touche les autres écrans. */

.bd-fin {
  --u: min(0.521vw, 0.926vh, 15px);
  /* l'unité des TEXTES sur PC : --u, mais qui ne descend pas sous 8,6 px tant qu'elle peut grandir d'un sixième au plus.
     Sur un écran de 1 366 × 768 (--u = 7,1 px), les boîtes gardent leurs proportions et les textes grandissent de 18 % :
     le PC aussi lisible que le téléphone, sans qu'un écran plus étroit (1 024 × 768) coupe ses libellés */
  --t: max(var(--u), min(8.6px, calc(var(--u) * 1.18)));
  --fit-min: 13px;   /* (un pseudo trop long rapetisse jusque-là plutôt que d'être coupé : fin.js, ajuster) */
  --ink: #151515; --card: #FBFAF7; --gold: #FFD23F; --vert: #3DDC84; --corail: #FF7A6E;
  --cyan: #2EF2FF; --sang: #FF2D55;
  /* (le rouge des textes de Hellborn, le démon noir : un rouge vif qui se lit sur le noir, de la famille de son dessin) */
  --enfer: #FF3347;
  --fc: 'Barlow Condensed', 'Arial Narrow', sans-serif; --fb: 'Barlow', 'Segoe UI', Arial, sans-serif;
  /* les encoches : celles du lobby (--sa-*, css/hub.css) si elles sont posées, sinon celles du navigateur */
  --f-t: var(--sa-t, env(safe-area-inset-top, 0px)); --f-r: var(--sa-r, env(safe-area-inset-right, 0px));
  --f-b: var(--sa-b, env(safe-area-inset-bottom, 0px)); --f-l: var(--sa-l, env(safe-area-inset-left, 0px));
  /* les couleurs du fond : violet (égalité, spectateur), or (victoire), rouge (défaite) */
  --ov1: #B884FF; --ov2: #5B1FB0; --ov3: #2A0B5E;
  /* les colonnes : largeur, taille de la balle, hauteur d'une marche du podium */
  --cw: calc(var(--u) * 33); --bs: calc(var(--u) * 15); --mh: calc(var(--u) * 7);
  --out: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 0 2px 0 var(--ink);
  position: fixed; inset: 0; z-index: 40; overflow: hidden; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(var(--u) * 2 + var(--f-t)) calc(var(--u) * 3.2 + var(--f-r)) calc(var(--u) * 2.2 + var(--f-b)) calc(var(--u) * 3.2 + var(--f-l));
  background: var(--ov3); color: #fff; font-family: var(--fb); text-align: left;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  animation: finIn 0.3s ease-out;
}
.bd-fin *, .bd-fin *::before, .bd-fin *::after { box-sizing: border-box; }
.bd-fin[data-res="gagne"] { --ov1: #FFE58A; --ov2: #F2A900; --ov3: #6B3A00; }
.bd-fin[data-res="perd"] { --ov1: #FF9A8A; --ov2: #C8323C; --ov3: #3B0A18; }
.bd-fin [hidden] { display: none !important; }
.bd-fin :where(button) { font: inherit; color: inherit; -webkit-user-select: none; user-select: none; }
.bd-fin :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.bd-fin :where(p) { margin: 0; }
@keyframes finIn { from { opacity: 0; } }
/* les dessins d'emblème et de décor, qu'ils soient en SVG (provisoires) ou en images (les vrais) */
.bd-fin .fin-emb { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ─── le fond : les rayons, les confettis ─── */
.fin-fond { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 50% 36%, var(--ov1) 0, var(--ov2) 46%, var(--ov3) 100%); }
.fin-rayons { position: absolute; left: 50%; top: 36%; width: max(260vw, 260vh); aspect-ratio: 1; translate: -50% -50%; background: repeating-conic-gradient(rgba(255, 255, 255, 0.1) 0 7deg, rgba(255, 255, 255, 0) 7deg 14deg); animation: finRayons 60s linear infinite; }
@keyframes finRayons { to { rotate: 360deg; } }
/* (un trou ovale et doux autour du titre et du sous-titre, posé par fin.js : aucun confetti ne passe devant eux) */
.fin-confettis { --tx: -99px; --ty: -99px; --ta: 1px; --tb: 1px; position: absolute; inset: 0; -webkit-mask-image: radial-gradient(var(--ta) var(--tb) at var(--tx) var(--ty), transparent 70%, #000 100%); mask-image: radial-gradient(var(--ta) var(--tb) at var(--tx) var(--ty), transparent 70%, #000 100%); }
.fin-confettis i { position: absolute; left: var(--x); top: -30px; width: 10px; height: 16px; border-radius: 3px; background: var(--c); box-shadow: 0 0 0 2px rgba(21, 21, 21, 0.25); animation: finConf var(--d) linear infinite; animation-delay: var(--dl); }
@keyframes finConf { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(100vh + 60px)) rotate(var(--r)); } }
/* (le bas de l'écran s'assombrit : le sol de la scène, sous le bandeau) */
.fin-sol { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top, rgba(14, 8, 34, 0.8), rgba(14, 8, 34, 0.35) 50%, rgba(14, 8, 34, 0)); }

/* ─── en haut : le mode (et la série), le titre (de TON point de vue), le sous-titre ─── */
.fin-tete { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "g titre d" "sous sous sous"; align-items: start; column-gap: calc(var(--u) * 2); }
.fin-g { display: contents; }
.fin-mode, .fin-serie { max-width: 100%; padding: calc(var(--u) * 0.4) calc(var(--u) * 1.4) calc(var(--u) * 0.5); border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.1); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); font: italic 800 max(12px, calc(var(--t) * 2.1))/1.2 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-mode { grid-area: g; justify-self: start; }
.fin-mode span { white-space: nowrap; }
.fin-mode i { font-style: normal; }
.fin-serie { grid-area: d; justify-self: end; background: var(--ink); color: var(--gold); }
.fin-titre { grid-area: titre; position: relative; display: flex; justify-content: center; min-width: 0; }
.fin-h { margin: 0; color: #fff; font: italic 800 calc(var(--u) * 8.4)/0.92 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; text-align: center; text-shadow: 5px 5px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 0 4px 0 var(--ink); padding: 0 calc(var(--u) * 0.6) calc(var(--u) * 0.4); }
.bd-fin[data-res="gagne"] .fin-h { color: var(--gold); }
.fin-h[data-long] { font-size: calc(var(--u) * 6.2); }
.fin-h .fin-n { display: inline-block; min-width: 0.7em; color: var(--gold); }
.fin-exp { font-size: 0.5em; vertical-align: 0.75em; text-transform: none; margin-left: 0.04em; }
.fin-h .fin-n.bat { animation: finBat 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes finBat { from { transform: scale(1.7); } }
.fin-sous { grid-area: sous; justify-self: center; position: relative; z-index: 1; max-width: 100%; margin-top: calc(var(--u) * 0.7); padding: calc(var(--u) * 0.45) calc(var(--u) * 1.4) calc(var(--u) * 0.55); border-radius: calc(var(--u) * 1); background: rgba(21, 21, 21, 0.8); color: #fff; font: 600 max(12px, calc(var(--t) * 1.9))/1.25 var(--fb); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* l'annulation de la revanche : 2 s de bandeau rouge à la place du titre (§7.3) */
.fin-bandeau-rouge { display: none; }
.bd-fin.fin-annule .fin-h, .bd-fin.fin-annule .fin-mode, .bd-fin.fin-annule .fin-serie, .bd-fin.fin-annule .fin-sous { visibility: hidden; }
.bd-fin.fin-annule .fin-bandeau-rouge { display: block !important; position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; margin: 0; width: max-content; max-width: calc(100vw - var(--u) * 8 - var(--f-l) - var(--f-r)); padding: calc(var(--u) * 1) calc(var(--u) * 2.4) calc(var(--u) * 1.1); border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.4); background: #E5484D; color: #fff; box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); font: italic 800 calc(var(--u) * 3.2)/1.1 var(--fc); text-transform: uppercase; text-align: center; animation: finTampon 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.bd-fin.fin-annule .fin-titre { position: static; }
.bd-fin.fin-annule .fin-tete { min-height: calc(var(--u) * 8); }

/* ═══ LA SCÈNE : les colonnes-podiums, posées sur le sol ═══ */
/* (sans rognage : le décor du rang déborde vers le haut ; un peu de place en haut pour lui, en bas pour le sol) */
.fin-scene { position: relative; z-index: 1; min-height: 0; display: flex; justify-content: center; align-items: stretch; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 1); padding: calc(var(--bs) * 0.3) 0 calc(var(--u) * 1.4); }
.fin-podium { position: relative; display: flex; align-items: stretch; justify-content: center; gap: calc(var(--u) * 6); flex: 0 1 auto; min-width: 0; }
.fin-camp { position: relative; display: flex; gap: calc(var(--u) * 1.8); flex: 0 1 auto; min-width: 0; }
.bd-fin:not([data-equipes]) .fin-podium { gap: calc(var(--u) * 2.6); }
/* LE SOL : une estrade d'encre sous toutes les colonnes ; les socles s'y posent */
.fin-podium::after { content: ''; position: absolute; z-index: 0; left: calc(var(--u) * -3); right: calc(var(--u) * -3); bottom: calc(var(--u) * -1.4); height: calc(var(--u) * 2.2); border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1); background: linear-gradient(#3A2F70 0 45%, #241C4E 45%); box-shadow: 0 calc(var(--u) * 0.6) 0 rgba(21, 21, 21, 0.4); }
/* les tailles selon le nombre de colonnes (1 VS 1 : deux grandes colonnes, bien écartées) */
.bd-fin[data-lay="cols"][data-n="2"] { --cw: calc(var(--u) * 46); --bs: calc(var(--u) * 17); --mh: calc(var(--u) * 6); }
.bd-fin[data-lay="cols"][data-n="2"] .fin-podium { gap: calc(var(--u) * 22); }
.bd-fin[data-lay="cols"][data-n="3"] { --cw: calc(var(--u) * 38); --bs: calc(var(--u) * 17); }
.bd-fin[data-lay="cols"][data-n="5"], .bd-fin[data-lay="cols"][data-n="6"] { --cw: calc(var(--u) * 30); --bs: calc(var(--u) * 12.5); --mh: calc(var(--u) * 6); }
.bd-fin[data-lay="cols"][data-n="5"] .fin-podium, .bd-fin[data-lay="cols"][data-n="6"] .fin-podium { gap: calc(var(--u) * 4.4); }
.bd-fin[data-lay="cols"][data-n="5"] .fin-camp, .bd-fin[data-lay="cols"][data-n="6"] .fin-camp { gap: calc(var(--u) * 1.4); }

/* ─── LA COLONNE-PODIUM : la balle sur le chapiteau, la carte du joueur sur le fût, le socle au sol ─── */
.fin-col { position: relative; flex: 0 1 var(--cw); width: var(--cw); min-width: 0; display: flex; flex-direction: column; align-items: center; }
/* (la marche : un espace au-dessus de la balle, qui rapetisse si la place manque, plutôt que de pousser la colonne sous
   le sol ; les gagnants restent plus haut tant qu'il y a la place) */
.fin-col::after { content: ''; order: -1; flex: 0 1 calc(var(--m, 0) * var(--mh)); min-height: 0; }
.fin-col[data-th="or"] { --p-fut: #2B2163; --p-fut2: #3B2F8C; --p-chap: #FFD23F; --p-chap2: #E9A928; --p-tab: #FFD23F; --p-so: #FFD23F; --p-so2: #C98A12; }
.fin-col[data-th="argent"] { --p-fut: #545D7A; --p-fut2: #636D8B; --p-chap: #DDE3EC; --p-chap2: #AEB8C7; --p-tab: #E9EEF4; --p-so: #C3CBD8; --p-so2: #8E98AA; }
.fin-col[data-th="bronze"] { --p-fut: #66432F; --p-fut2: #76503A; --p-chap: #E6A56E; --p-chap2: #B9733F; --p-tab: #F0B989; --p-so: #D9965E; --p-so2: #9C5F31; }
.fin-col[data-th="pierre"] { --p-fut: #474C61; --p-fut2: #53596F; --p-chap: #B4BCCB; --p-chap2: #8E97A8; --p-tab: #FBFAF7; --p-so: #A4ACBB; --p-so2: #757E90; }
.fin-col.clic { cursor: pointer; }
.fin-col.parti .fin-balle, .fin-col.parti .fin-carte > :not(.fin-pend) { filter: grayscale(1); }
.fin-col.parti .fin-carte { background: #E9E6DF; }
/* LE GAGNANT : un rai de lumière qui tombe sur sa colonne (fixe), un chapiteau d'or à volutes et une gemme, un fût
   cerclé d'or, des lauriers autour de son « 1st » (et pas d'éclat derrière sa balle : le décor autour de la balle,
   c'est son RANG, rien ne doit s'y confondre) */
.fin-col.gagne::before { content: ''; position: absolute; z-index: 0; left: 50%; top: calc(var(--bs) * -0.5); width: 92%; height: calc(var(--bs) * 2.6); translate: -50% 0; background: linear-gradient(rgba(255, 250, 220, 0.55), rgba(255, 250, 220, 0.18) 55%, rgba(255, 250, 220, 0)); clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%); pointer-events: none; }

/* la balle au-dessus du socle, et le décor (le cercle) de son rang autour d'elle */
.fin-haut { position: relative; z-index: 2; flex: none; width: var(--bs); height: var(--bs); margin-bottom: calc(var(--bs) * -0.1); }
.fin-haut.n2 { width: calc(var(--bs) * 1.55); }
.fin-haut.n3 { width: calc(var(--bs) * 1.9); }
.fin-balle { position: absolute; inset: 0; z-index: 1; border-radius: 50%; overflow: hidden; border: calc(var(--u) * 0.5) solid var(--ink); background: var(--card); box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.7) 0 rgba(21, 21, 21, 0.45); }
.fin-haut.n2 .fin-balle, .fin-haut.n3 .fin-balle { inset: auto; bottom: 0; width: calc(var(--bs) * 0.74); height: calc(var(--bs) * 0.74); }
.fin-haut.n2 .fin-balle:nth-of-type(1) { left: 0; } .fin-haut.n2 .fin-balle:nth-of-type(2) { right: 0; }
.fin-haut.n3 .fin-balle { width: calc(var(--bs) * 0.66); height: calc(var(--bs) * 0.66); }
.fin-haut.n3 .fin-balle:nth-of-type(1) { left: 0; } .fin-haut.n3 .fin-balle:nth-of-type(2) { left: 50%; translate: -50% 0; bottom: 22%; z-index: 2; } .fin-haut.n3 .fin-balle:nth-of-type(3) { right: 0; }
.fin-balle img, .fin-sans { display: block; width: 100%; height: 100%; object-fit: cover; }
.fin-sans { display: grid; place-items: center; background: #DDD8CD; color: var(--ink); font: italic 800 calc(var(--bs) * 0.42)/1 var(--fc); }
/* le décor du rang : la boîte des dessins (200 × 200, la balle de rayon 54 au centre), soit 1,85 fois la balle, centrée */
.fin-decor-z { position: absolute; z-index: 2; left: 50%; top: 50%; width: calc(var(--bs) * 1.852); height: calc(var(--bs) * 1.852); translate: -50% -50%; pointer-events: none; }
.fin-decor-z > *, .fin-decor-v > * { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* pendant le placement : un anneau en pointillés (le rang n'est pas encore connu) */
.fin-balle.plac { overflow: visible; }
.fin-balle.plac img { border-radius: 50%; }
.fin-balle.plac::after { content: ''; position: absolute; inset: calc(var(--u) * -1.25); border: calc(var(--u) * 0.5) dashed rgba(255, 255, 255, 0.95); border-radius: 50%; }

/* le fût (des cannelures), le chapiteau, le socle */
.fin-pilier { position: relative; flex: 1 0 auto; align-self: stretch; min-height: 0; margin: 0 calc(var(--u) * 1.1); display: flex; flex-direction: column; }
.fin-pilier::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1); z-index: 0; border: solid var(--ink); border-width: 0 calc(var(--u) * 0.45);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 28%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.3)), repeating-linear-gradient(90deg, var(--p-fut) 0 calc(var(--u) * 2.4), var(--p-fut2) calc(var(--u) * 2.4) calc(var(--u) * 3)); }
.fin-col[data-th="or"] .fin-pilier::before { background: linear-gradient(90deg, #FFD23F 0 calc(var(--u) * 0.7), rgba(255, 255, 255, 0) calc(var(--u) * 0.7) calc(100% - var(--u) * 0.7), #E9A928 calc(100% - var(--u) * 0.7)), linear-gradient(rgba(0, 0, 0, 0) calc(100% - var(--u) * 6), #FFD23F calc(100% - var(--u) * 6) calc(100% - var(--u) * 5), rgba(0, 0, 0, 0) calc(100% - var(--u) * 5)), linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 28%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.3)), repeating-linear-gradient(90deg, var(--p-fut) 0 calc(var(--u) * 2.4), var(--p-fut2) calc(var(--u) * 2.4) calc(var(--u) * 3)); }
.fin-chap { position: relative; z-index: 1; flex: none; height: calc(var(--u) * 3.2); margin: 0 calc(var(--u) * -1.1); border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1); background: linear-gradient(var(--p-chap) 0 55%, var(--p-chap2) 55%); box-shadow: 0 calc(var(--u) * 0.5) 0 rgba(21, 21, 21, 0.35); }
/* (le chapiteau d'or : une gemme au milieu et deux volutes aux bouts) */
.fin-col[data-th="or"] .fin-chap::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.7); translate: -50% -50%; rotate: 45deg; border: calc(var(--u) * 0.3) solid var(--ink); background: #E5484D; box-shadow: inset calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 rgba(255, 255, 255, 0.5); }
.fin-col[data-th="or"] .fin-chap::after { content: ''; position: absolute; top: 50%; left: calc(var(--u) * -1.5); right: calc(var(--u) * -1.5); height: calc(var(--u) * 2.8); translate: 0 -50%; background: radial-gradient(circle at calc(var(--u) * 1.4) 50%, #FFE58A 0 calc(var(--u) * 0.55), var(--ink) calc(var(--u) * 0.55) calc(var(--u) * 0.8), #FFD23F calc(var(--u) * 0.8) calc(var(--u) * 1.05), var(--ink) calc(var(--u) * 1.05) calc(var(--u) * 1.35), transparent calc(var(--u) * 1.35)), radial-gradient(circle at calc(100% - var(--u) * 1.4) 50%, #FFE58A 0 calc(var(--u) * 0.55), var(--ink) calc(var(--u) * 0.55) calc(var(--u) * 0.8), #FFD23F calc(var(--u) * 0.8) calc(var(--u) * 1.05), var(--ink) calc(var(--u) * 1.05) calc(var(--u) * 1.35), transparent calc(var(--u) * 1.35)); }
.fin-socle { position: relative; z-index: 1; flex: none; margin: auto calc(var(--u) * -1.4) 0; height: calc(var(--u) * 2.4); border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 0; background: linear-gradient(var(--p-so) 0 50%, var(--p-so2) 50%); }

/* ─── LA CARTE DU JOUEUR : sa place, son pseudo, sa balle et son rang, ses stats, son Elo ─── */
.fin-carte { position: relative; z-index: 3; flex: none; margin: calc(var(--u) * 2.6) calc(var(--u) * 0.4) calc(var(--u) * 3.6); padding: calc(var(--u) * 2.2) calc(var(--u) * 1.4) calc(var(--u) * 1.1); border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.2); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); }
.fin-col.moi .fin-carte { outline: calc(var(--u) * 0.5) solid var(--gold); outline-offset: calc(var(--u) * 0.2); }
/* en équipe : un liseré bleu pour ton équipe, rouge pour l'autre (les couleurs des coéquipiers en partie) */
.fin-col.camp-a .fin-carte::before, .fin-col.camp-b .fin-carte::before { content: ''; position: absolute; left: calc(var(--u) * 1); right: calc(var(--u) * 1); top: calc(var(--u) * 0.5); height: calc(var(--u) * 0.6); border-radius: calc(var(--u) * 0.3); background: #4FB6F0; }
.fin-col.camp-b .fin-carte::before { background: #F0606A; }
.fin-place { position: absolute; left: 50%; top: 0; z-index: 2; translate: -50% -62%; padding: calc(var(--u) * 0.25) calc(var(--u) * 1.5) calc(var(--u) * 0.4); border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1); background: var(--p-tab); color: var(--ink); box-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); font: italic 800 calc(var(--t) * 3)/1 var(--fc); white-space: nowrap; }
.fin-place small { font-size: max(13px, 0.62em); margin-left: 1px; vertical-align: 0.42em; }
/* les lauriers du gagnant, de part et d'autre de son « 1st » */
.fin-laurier { position: absolute; z-index: 1; left: 50%; top: 0; width: calc(var(--t) * 12.5); height: calc(var(--t) * 3.75); translate: -50% -88%; overflow: visible; filter: drop-shadow(calc(var(--u) * 0.25) calc(var(--u) * 0.25) 0 var(--ink)); }
/* « Toi » et « Bot » : sur le bord haut de la carte, à gauche (jamais sur la balle) */
.fin-tg { position: absolute; z-index: 2; left: calc(var(--u) * 1); top: 0; translate: 0 -55%; }
/* « ✓ Revanche » et « A quitté » : pendus sous la carte */
.fin-pend { position: absolute; z-index: 2; left: 50%; top: 100%; translate: -50% calc(var(--u) * 0.7); display: flex; }
.fin-pend:empty { display: none; }
/* (les cartes étroites, 5 colonnes et plus, la grande scène : « Toi » et « Bot » se pendent aussi sous la carte ; sur le
   bord haut, ils passaient sur l'étiquette de la place et ses lauriers) */
.bd-fin[data-lay="grand"] .fin-tg, .bd-fin[data-n="5"] .fin-tg, .bd-fin[data-n="6"] .fin-tg { left: 50%; top: 100%; translate: -50% calc(var(--u) * 0.7); }
.fin-veut { display: inline-block; padding: calc(var(--u) * 0.3) calc(var(--u) * 0.9) calc(var(--u) * 0.4); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 0.8); background: var(--vert); color: var(--ink); box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); font: italic 800 max(12px, calc(var(--t) * 1.8))/1 var(--fc); text-transform: uppercase; white-space: nowrap; animation: finPop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes finPop { from { transform: scale(0.4); opacity: 0; } }
.fin-toi, .fin-tag { flex: none; display: inline-block; padding: calc(var(--u) * 0.25) calc(var(--u) * 0.7) calc(var(--u) * 0.3); border: calc(var(--u) * 0.25) solid var(--ink); border-radius: calc(var(--u) * 0.6); background: var(--gold); color: var(--ink); font: italic 800 max(12px, calc(var(--t) * 1.55))/1 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.fin-tg.fin-toi, .fin-tg.fin-tag, .fin-pend .fin-tag { box-shadow: calc(var(--u) * 0.25) calc(var(--u) * 0.25) 0 var(--ink); }
.fin-tag.bot { background: #DDD8CD; }
.fin-tag.parti { background: #E5484D; color: #fff; }
.fin-pend .fin-tag.parti { padding: calc(var(--u) * 0.3) calc(var(--u) * 0.9) calc(var(--u) * 0.4); border-width: calc(var(--u) * 0.3); font-size: max(12px, calc(var(--t) * 1.8)); }
.fin-nom { display: flex; align-items: center; min-width: 0; }
.fin-nom b { flex: 1 1 auto; min-width: 0; font: italic 800 calc(var(--t) * 3.3)/1.22 var(--fc); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2px; margin: calc(var(--u) * -0.3) 0; }
.fin-nom b.l { font-size: calc(var(--t) * 2.9); }
.fin-nom b.xl { font-size: calc(var(--t) * 2.5); }
/* la ligne sous le pseudo : sa balle (qui se coupe la première), puis son rang (mini-emblème et nom) */
.fin-info { display: flex; align-items: center; gap: calc(var(--u) * 0.8); min-width: 0; margin-top: calc(var(--u) * 0.4); min-height: calc(var(--t) * 2.6); }
.fin-nb { flex: 0 1 auto; min-width: 0; font: 700 max(12px, calc(var(--t) * 1.6))/1.3 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: rgba(21, 21, 21, 0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-rn { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.4); padding: calc(var(--u) * 0.15) calc(var(--u) * 0.7) calc(var(--u) * 0.2) calc(var(--u) * 0.25); border-radius: calc(var(--u) * 0.6); background: var(--ink); color: var(--rk, #fff); font: italic 800 max(12px, calc(var(--t) * 1.7))/1 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.fin-rn.plac { color: #E9E2FF; }
.fin-rn.noir { background: #050308; box-shadow: inset 0 0 0 1.5px var(--rk); }
.fin-rn.noir:not(.glitch) { color: var(--enfer); }
.fin-rn.glitch, .fp-rg.glitch .fp-rgn, .fp-but.glitch .fp-but-n { color: #F4EEFF; text-shadow: -1.5px 0 var(--cyan), 1.5px 0 var(--sang); }
.fin-mini { flex: none; display: inline-block; width: calc(var(--t) * 2.4); height: calc(var(--t) * 2.4); }
.fin-mini svg circle[stroke-dasharray] { stroke: #fff; }

/* les statistiques : trois lignes, avec leur nom en toutes lettres (data-stats="mots", quand chaque carte a la place de
   les écrire sans rien couper), sinon trois cases icône + chiffre et la légende une fois sous le podium */
.fin-stats { display: grid; gap: calc(var(--u) * 0.3); margin-top: calc(var(--u) * 0.9); padding-top: calc(var(--u) * 0.8); border-top: calc(var(--u) * 0.25) solid rgba(21, 21, 21, 0.12); }
.fin-st { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 0.8); min-width: 0; }
.fin-ic { display: block; flex: none; width: calc(var(--t) * 2.7); height: calc(var(--t) * 2.7); cursor: help; }
.fin-ic svg { display: block; width: 100%; height: 100%; }
.fin-lb { min-width: 0; font: 700 max(12px, calc(var(--t) * 1.8))/1.3 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: rgba(21, 21, 21, 0.72); white-space: nowrap; overflow: hidden; }
.fin-st b { font: italic 800 calc(var(--t) * 2.8)/1.1 var(--fc); white-space: nowrap; padding: 0 calc(var(--u) * 0.2); }
/* LA MEILLEURE VALEUR de la partie (le plus d'éliminations, le plus de dégâts infligés) : un ruban d'or SOUS le chiffre,
   qui ne touche jamais l'encre des chiffres */
.fin-st.top b, .fin-li-s.top b { background: linear-gradient(transparent 0 72%, var(--gold) 72% 96%, transparent 96%); }
.fin-st.top .fin-ic::after { content: none; }
.bd-fin[data-stats="ic"] .fin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 0.6); }
.bd-fin[data-stats="ic"] .fin-st { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: calc(var(--u) * 0.2); }
.bd-fin[data-stats="ic"] .fin-lb { display: none; }
.bd-fin[data-stats="ic"] .fin-st b { font-size: calc(var(--t) * 2.6); }
/* la légende des icônes, sous le podium : seulement quand les cartes n'écrivent pas les noms (et sans liste à côté) */
.fin-leg { display: none; }
.bd-fin[data-stats="ic"]:not([data-liste]) .fin-leg { position: absolute; z-index: 4; left: 50%; bottom: calc(var(--u) * -1.15); translate: -50% 0; display: flex; align-items: center; gap: calc(var(--u) * 2.4); margin: 0; padding: calc(var(--u) * 0.2) calc(var(--u) * 1.2) calc(var(--u) * 0.3); border-radius: calc(var(--u) * 0.8); background: rgba(21, 21, 21, 0.85); color: #fff; font: 700 max(12px, calc(var(--t) * 1.5))/1.2 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.bd-fin:has(.fin-veut:not([hidden])) .fin-leg, .bd-fin:has(.fin-pend .fin-tag) .fin-leg { visibility: hidden; }
.fin-leg span, .fin-legende span, .fin-bulle span { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.5); white-space: nowrap; }
.fin-leg svg { width: max(14px, calc(var(--t) * 1.9)); height: max(14px, calc(var(--t) * 1.9)); flex: none; }

/* L'ELO DE CHAQUE JOUEUR, en bas de sa carte : un bandeau d'encre « ELO  1 063 → 1 075  +12 » (Max : « l'Elo de tout le
   monde, affiché proprement ») ; pendant le déroulé, l'après et l'écart attendent que le compte commence */
.fin-carte.a-elo { padding-bottom: 0; }
.fin-elo { --fs: calc(var(--t) * 2.5); display: flex; justify-content: center; align-items: center; gap: 0.35em; margin: calc(var(--u) * 1) calc(var(--u) * -1.4) 0; padding: 0.32em 0.5em 0.36em; min-height: 2em; border-top: calc(var(--u) * 0.35) solid var(--ink); border-radius: 0 0 calc(var(--u) * 0.8) calc(var(--u) * 0.8); background: #231C4A; color: #fff; font: italic 800 var(--fs)/1 var(--fc); white-space: nowrap; overflow: hidden; }
.fin-elo:empty { visibility: hidden; }
.fe-lb { font-size: 0.62em; letter-spacing: 1px; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; }
.fe-ch { display: inline-flex; align-items: baseline; gap: 0.25em; word-spacing: 0.12em; }
.fe-av { color: rgba(255, 255, 255, 0.72); }
.fe-fl { font-style: normal; color: rgba(255, 255, 255, 0.6); }
.fe-ap { color: #fff; }
.fe-d { padding: 0.12em 0.36em 0.16em; border: max(1.5px, calc(var(--u) * 0.25)) solid var(--ink); border-radius: 0.3em; color: var(--ink); background: #E7E3DA; }
.fe-d.up { background: var(--vert); } .fe-d.down { background: var(--corail); }
.fe-t { font-size: 0.86em; letter-spacing: 0.5px; text-transform: uppercase; }
.fe-t.plac { color: #D9CCFF; }
.fe-t.nul, .fe-t.att { color: rgba(255, 255, 255, 0.7); }
.fin-poids { flex: none; padding: 0.1em 0.3em 0.14em; border: 1.5px solid var(--gold); border-radius: 0.3em; background: var(--ink); color: var(--gold); font: italic 800 0.86em/1 var(--fc); cursor: help; }
.bd-fin.fin-intro:not(.elo-compte) .fe-fl, .bd-fin.fin-intro:not(.elo-compte) .fe-ap { visibility: hidden; }
.bd-fin.fin-intro:not(.elo-fait) .fe-d, .bd-fin.fin-intro:not(.elo-fait) .fin-poids { visibility: hidden; }
.bd-fin.elo-fait.fin-intro .fe-d { animation: finPop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both; }

/* ═══ LA GRANDE SCÈNE (plus de 4 joueurs) : le podium, et une liste claire ═══ */
.bd-fin[data-lay="grand"] { --cw: calc(var(--u) * 25); --bs: calc(var(--u) * 11); --mh: calc(var(--u) * 5.5); }
.bd-fin[data-lay="grand"] .fin-podium { gap: calc(var(--u) * 2); flex: none; }
.bd-fin[data-lay="grand"] .fin-camp { gap: calc(var(--u) * 1.4); }
.bd-fin[data-lay="grand"] .fin-place { font-size: calc(var(--t) * 2.6); }
.bd-fin[data-lay="grand"] .fin-nom b { font-size: calc(var(--t) * 2.8); }
.bd-fin[data-lay="grand"] .fin-nom b.l { font-size: calc(var(--t) * 2.4); }
.bd-fin[data-lay="grand"] .fin-nom b.xl { font-size: calc(var(--t) * 2.1); }
.bd-fin[data-lay="grand"] .fin-st b { font-size: calc(var(--t) * 2.3); }
.bd-fin[data-liste="2"] { --cw: calc(var(--u) * 23); }
/* (des équipes de plus de 3 : une colonne par équipe, ses balles côte à côte) */
.fin-col.equipe .fin-nom b { font-size: calc(var(--t) * 2.3); }

/* LA LISTE (sur PC) : un panneau qui se resserre sur son tableau ; en tête son titre et les places qu'elle couvre ;
   au-dessus de chaque colonne de chiffres, son icône ; en pied, la légende. Au-delà de 10 lignes, deux colonnes (jamais
   de défilement sur PC). Une ligne par JOUEUR ; les joueurs d'une même équipe groupés sous leur place. */
.fin-liste { --sc: max(calc(var(--u) * 6), calc(var(--t) * 5.4)); --lgap: calc(var(--u) * 0.4); position: relative; z-index: 2; flex: 0 1 auto; align-self: center; min-width: 0; max-height: 100%; display: flex; flex-direction: column; padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4) calc(var(--u) * 1.1); border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.6); background: rgba(251, 250, 247, 0.97); color: var(--ink); box-shadow: calc(var(--u) * 0.7) calc(var(--u) * 0.7) 0 var(--ink); }
.fin-liste[data-cols="2"] { flex: 1 1 auto; }
@media (min-height: 521px) {
  .fin-liste[data-cols="2"] { --lgap: calc(var(--u) * 0.3); }
  .fin-liste[data-cols="2"] .fin-li { min-height: calc(var(--u) * 3.6); padding-top: calc(var(--u) * 0.15); padding-bottom: calc(var(--u) * 0.15); }
  .fin-liste[data-cols="2"] .fin-li-b img, .fin-liste[data-cols="2"] .fin-li-b .fin-sans { width: calc(var(--u) * 3.1); height: calc(var(--u) * 3.1); }
  .fin-liste[data-cols="2"] .fin-li-n b { line-height: 1.1; }
}
.fin-li-tete { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 2); margin: 0 calc(var(--u) * 0.9) calc(var(--u) * 0.7); font: 800 max(12px, calc(var(--t) * 1.8))/1 var(--fc); letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
.fin-li-places { color: rgba(21, 21, 21, 0.55); font-size: 0.86em; letter-spacing: 1px; }
.fin-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 0.4) calc(var(--u) * 2); margin-top: calc(var(--u) * 0.9); padding-top: calc(var(--u) * 0.8); border-top: calc(var(--u) * 0.2) solid rgba(21, 21, 21, 0.1); font: 700 max(12px, calc(var(--t) * 1.5))/1.2 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: rgba(21, 21, 21, 0.62); }
.fin-legende svg { width: max(15px, calc(var(--t) * 2)); height: max(15px, calc(var(--t) * 2)); flex: none; }
.fin-li-barre { display: none; }
.fin-li-ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows), auto); grid-auto-columns: minmax(calc(var(--u) * 46), 1fr); gap: var(--lgap) calc(var(--u) * 1.6); min-height: 0; }
.fin-liste[data-cols="1"] .fin-li-ol { grid-auto-columns: minmax(calc(var(--u) * 58), 1fr); }
.fin-li { position: relative; display: grid; grid-template-columns: calc(var(--u) * 4.2) calc(var(--u) * 4.4) minmax(0, 1fr) repeat(3, var(--sc)); align-items: center; column-gap: calc(var(--u) * 0.8); min-height: calc(var(--u) * 4.4); padding: calc(var(--u) * 0.35) calc(var(--u) * 0.9); border-radius: calc(var(--u) * 0.9); background: rgba(21, 21, 21, 0.055); }
/* (une équipe : ses lignes se touchent, un seul bloc arrondi, et un trait à gauche qui les relie) */
.fin-li.g-deb { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fin-li.g-mid, .fin-li.g-fin { border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0 calc(var(--lgap) * -1) 0 0 rgba(21, 21, 21, 0.055); }
.fin-li.g-mid { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fin-li.g-deb::before, .fin-li.g-mid::before, .fin-li.g-fin::before { content: ''; position: absolute; left: calc(var(--u) * 0.3); top: 0; bottom: 0; width: calc(var(--u) * 0.45); background: rgba(21, 21, 21, 0.28); }
.fin-li.g-deb::before { top: 22%; border-radius: 3px 3px 0 0; }
.fin-li.g-fin::before { bottom: 22%; border-radius: 0 0 3px 3px; }
.fin-li.g-mid::before { top: calc(var(--lgap) * -1); }
.fin-li.g-fin::before { top: calc(var(--lgap) * -1); }
.fin-li.allie { background: rgba(255, 210, 63, 0.3); }
.fin-li.allie.g-mid, .fin-li.allie.g-fin { box-shadow: 0 calc(var(--lgap) * -1) 0 0 rgba(255, 210, 63, 0.3); }
.fin-li-h { min-height: calc(var(--u) * 3); padding-top: 0; padding-bottom: 0; background: none; }
.fin-li-ht { grid-column: 1 / 4; font: 800 max(12px, calc(var(--t) * 1.5))/1 var(--fc); letter-spacing: 1.5px; text-transform: uppercase; color: rgba(21, 21, 21, 0.55); }
.fin-li-ht .tel { display: none; }
.fin-li-h .fin-li-s { justify-content: center; }
.fin-li-h .fin-ic { width: max(16px, calc(var(--t) * 2.3)); height: max(16px, calc(var(--t) * 2.3)); }
.fin-li.moi { background: var(--gold); box-shadow: inset 0 0 0 calc(var(--u) * 0.3) var(--ink); }
.fin-li.moi.g-mid, .fin-li.moi.g-fin { box-shadow: inset 0 0 0 calc(var(--u) * 0.3) var(--ink), 0 calc(var(--lgap) * -1) 0 0 rgba(255, 210, 63, 0.3); }
.fin-li.parti > :not(.fin-li-n) { opacity: 0.55; }
.fin-li.parti .fin-li-n b { opacity: 0.55; }
.fin-li-pl { font: italic 800 calc(var(--t) * 2.3)/1 var(--fc); white-space: nowrap; }
.fin-li-b { display: flex; align-items: center; justify-content: center; }
.fin-li-b img, .fin-li-b .fin-sans { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); border-radius: 50%; border: calc(var(--u) * 0.3) solid var(--ink); background: var(--card); object-fit: cover; font-size: calc(var(--t) * 1.6); }
/* (une seule ligne : le pseudo, puis la balle en petit, qui se coupe en premier) */
.fin-li-n { display: flex; flex-wrap: nowrap; align-items: baseline; column-gap: calc(var(--u) * 0.7); min-width: 0; }
.fin-li-n b { flex: 0 0 auto; min-width: 0; max-width: 100%; font: italic 800 calc(var(--t) * 2.2)/1.25 var(--fc); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-li-n .fin-toi, .fin-li-n .fin-tag { align-self: center; font-size: max(12px, calc(var(--t) * 1.3)); padding: 0 calc(var(--u) * 0.5) 1px; line-height: 1.1; }
.fin-li-n small { flex: 0 1 auto; min-width: 0; font: 600 max(12px, calc(var(--t) * 1.5))/1.25 var(--fb); color: rgba(21, 21, 21, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-li-n small:empty { display: none; }
/* (une balle qui ne tient pas s'efface : fin.js, effacer) */
.bd-fin .fin-li-n small.cache, .bd-fin .fin-nb.cache, .bd-fin .fp-rgn.cache, .bd-fin .fb-r.cache { display: none !important; }
.fin-liste[data-cols="2"] .fin-li-n small { display: none; }
.fin-li-s { display: flex; align-items: center; justify-content: flex-end; }
.fin-li-s b { font: italic 800 calc(var(--t) * 2.1)/1.15 var(--fc); white-space: nowrap; padding: 0 calc(var(--u) * 0.2); }
.fin-li.moi .fin-li-s.top b { background: linear-gradient(transparent 0 72%, #fff 72% 96%, transparent 96%); }

/* ═══ EN BAS : TON BANDEAU (à gauche, sur toute la hauteur), la ligne d'état et les boutons (à droite) ═══ */
.fin-bas { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "bilan etat" "bilan btns"; column-gap: calc(var(--u) * 2.2); row-gap: calc(var(--u) * 0.8); margin-top: calc(var(--u) * 1.4); }
/* la ligne d'état : DEUX lignes réservées, le texte posé en bas à droite (les boutons ne bougent jamais) */
.fin-etat { grid-area: etat; width: 0; min-width: 100%; height: calc(2.5em + var(--u) * 1.1); display: flex; align-items: flex-end; justify-content: flex-end; font: 600 max(12px, calc(var(--t) * 1.8))/1.25 var(--fb); }
.fin-etat-t { max-width: 100%; padding: calc(var(--u) * 0.5) calc(var(--u) * 1.3) calc(var(--u) * 0.6); border-radius: calc(var(--u) * 1); background: rgba(21, 21, 21, 0.72); color: #fff; text-align: right; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.fin-etat.vide .fin-etat-t { visibility: hidden; }

/* TON BANDEAU (§7.2 point 5) : ton emblème, ton rang, « 1 012 → 1 024  +12 », et LA PISTE des paliers */
.fin-bilan { --rk: #9AA3B2; grid-area: bilan; position: relative; min-width: 0; display: flex; align-items: center; gap: calc(var(--u) * 1.8); padding: calc(var(--u) * 1) calc(var(--u) * 2) calc(var(--u) * 1) calc(var(--u) * 1.6); border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.6); color: #fff; box-shadow: calc(var(--u) * 0.7) calc(var(--u) * 0.7) 0 var(--ink);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 calc(var(--u) * 1.2), rgba(255, 255, 255, 0) calc(var(--u) * 1.2) calc(var(--u) * 2.4)), linear-gradient(160deg, #2E2668, #1B1544); animation: finBande 0.5s 0.9s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.fin-bilan::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * 0.9); border-radius: calc(var(--u) * 1.1) 0 0 calc(var(--u) * 1.1); background: var(--rk); }
.fin-bilan[data-k="hellborn"], .fin-bilan[data-k="hatred"] { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 calc(var(--u) * 1.2), rgba(255, 255, 255, 0) calc(var(--u) * 1.2) calc(var(--u) * 2.4)), linear-gradient(160deg, #1E0A12, #07040A); }
.bd-fin:not(.fin-intro) .fin-bilan { animation: none; }
@keyframes finBande { from { transform: translateY(40%); opacity: 0; } }
.fb-emb { position: relative; flex: none; width: calc(var(--u) * 10.5); height: calc(var(--u) * 10.5); }
.fb-emb > .fin-emb { filter: drop-shadow(calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink)); }
.fb-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 0.5); }
.fin-bilan:not(.spec) .fb-l1 { display: none; }
.fb-tag { font: 700 max(12px, calc(var(--t) * 1.6))/1 var(--fc); letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.fb-l2 { display: flex; align-items: center; gap: calc(var(--u) * 1.4); min-width: 0; }
.fb-nom { flex: none; font: italic 800 calc(var(--t) * 4)/1 var(--fc); text-transform: uppercase; white-space: nowrap; color: #fff; text-shadow: 3px 3px 0 var(--ink); }
.fin-bilan[data-k="hatred"] .fb-nom { text-shadow: -2px 0 var(--cyan), 2px 0 var(--sang), 3px 3px 0 var(--ink); }
.fin-bilan[data-k="hellborn"] .fb-nom { color: var(--enfer); text-shadow: 0 0 calc(var(--u) * 1.2) rgba(227, 23, 47, 0.75), 3px 3px 0 var(--ink); }
/* (les milliers : l'espace insécable de « 1 012 » s'élargit un peu, sinon elle disparaît dans la police condensée) */
.fb-chif, .fin-st b, .fin-li-s b, .fm-elo, .fb-score { word-spacing: 0.12em; }
.fb-chif { flex: none; font: italic 800 calc(var(--t) * 3)/1 var(--fc); white-space: nowrap; color: rgba(255, 255, 255, 0.82); }
.fb-chif i { font-style: normal; opacity: 0.75; }
.fb-chif b { color: #fff; }
.fb-delta { flex: none; padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1) calc(var(--u) * 0.45); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 0.9); color: var(--ink); font: italic 800 calc(var(--t) * 3.1)/1 var(--fc); text-transform: uppercase; white-space: nowrap; box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); }
.fb-delta.up { background: var(--vert); } .fb-delta.down { background: var(--corail); } .fb-delta.zero { background: #E7E3DA; }
.fin-bilan .fin-poids { font-size: calc(var(--t) * 2.2); padding: calc(var(--u) * 0.3) calc(var(--u) * 0.6); }
.fb-record, .fb-xp { flex: none; padding: calc(var(--u) * 0.3) calc(var(--u) * 0.8) calc(var(--u) * 0.4); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 0.7); background: var(--gold); color: var(--ink); font: italic 800 max(12px, calc(var(--t) * 1.9))/1 var(--fc); text-transform: uppercase; white-space: nowrap; }
.fb-xp { margin-left: auto; }
.fb-l3 { display: flex; align-items: center; min-width: 0; }
.fb-l3.infos { gap: calc(var(--u) * 1); }
.fb-l4 { display: flex; align-items: center; gap: calc(var(--u) * 1); min-height: calc(var(--t) * 2.4); min-width: 0; font: 600 max(12px, calc(var(--t) * 1.6))/1.25 var(--fb); color: rgba(255, 255, 255, 0.86); white-space: nowrap; overflow: hidden; }
.fb-encore { flex: none; font: 700 max(12px, calc(var(--t) * 1.9))/1.25 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.fb-r { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-l2 > .fb-r { flex: 0 1 auto; font: 600 max(12px, calc(var(--t) * 1.6))/1.25 var(--fb); color: rgba(255, 255, 255, 0.86); }
.fb-r.cache { display: none; }
.fb-evt { flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.5); padding: calc(var(--u) * 0.2) calc(var(--u) * 0.8) calc(var(--u) * 0.3); border-radius: calc(var(--u) * 0.7); font: italic 800 max(12px, calc(var(--t) * 1.8))/1 var(--fc); text-transform: uppercase; white-space: nowrap; }
.fb-evt svg { width: calc(var(--u) * 2); height: calc(var(--u) * 2); flex: none; }
.fb-evt.neuf { background: var(--gold); color: var(--ink); }
.fb-evt.bas { background: rgba(255, 255, 255, 0.16); color: #fff; }
.fb-evt.sauve { background: var(--vert); color: var(--ink); }
.fb-evt.prot { background: rgba(154, 200, 255, 0.22); color: #CFE6FF; }
/* (une phrase en deux formes : la longue sur PC, la courte au téléphone) */
.fb-ct { display: none; }
.fb-compte { flex: none; padding: calc(var(--u) * 0.3) calc(var(--u) * 0.9) calc(var(--u) * 0.4); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 0.7); background: #FFF3BF; color: var(--ink); font: italic 800 max(12px, calc(var(--t) * 1.7))/1 var(--fc); text-transform: uppercase; cursor: pointer; }
/* LE DÉROULÉ du bandeau : l'après et l'écart attendent que le compte commence ; « Encore… » et l'événement attendent
   le rang d'après (jamais « Platinum II » à côté de « Encore 25 Elo pour Diamond I ») */
.fin-bilan.rk:not(.compte) .fb-fl, .fin-bilan:not(.fini) .fb-delta, .fin-bilan:not(.fini) .fb-poids, .fin-bilan:not(.fini) .fb-record { visibility: hidden; }
.fin-bilan.fini .fb-delta { animation: finPop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.bd-fin.fin-fige .fin-bilan.fini .fb-delta { animation: none; }
.fin-bilan.avant .fb-encore, .fin-bilan.avant .fb-evt { visibility: hidden; }
/* les effets du rang dans le bandeau (§5.6) : une division gagnée « pop », un retour pâlit, un rang sauvé claque */
.fin-bilan.fx-pop .fb-nom { animation: finNomPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); color: var(--gold); }
.fin-bilan.fx-neuf .fb-emb > .fin-emb { animation: finSceau 0.55s cubic-bezier(0.2, 1.5, 0.4, 1); }
.fin-bilan.fx-bas .fb-emb > .fin-emb { animation: finPalit 0.8s ease-out; }
.fin-bilan.fx-sauve .fb-nom { animation: finNomPop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes finNomPop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } }
@keyframes finSceau { 0% { transform: scale(1.5); opacity: 0; } 60% { transform: scale(0.92); opacity: 1; } }
@keyframes finPalit { 0% { opacity: 1; } 40% { opacity: 0.35; transform: rotate(-6deg) scale(0.92); } 100% { opacity: 1; } }
.fin-bilan.att .fb-nom { font-size: calc(var(--t) * 3.2); color: rgba(255, 255, 255, 0.85); }

/* ─── LA PISTE DES PALIERS (Max : « les paliers visibles : d'où tu viens, où tu vas ») ───
   Au-dessus, le nom des rangs (leur mini-icône) ; la piste, une case par division, à la couleur de son rang ; dessous,
   les seuils ; au bout, le but. Ta balle roule de ton Elo d'avant (le trait blanc) à celui d'après. */
.fp { --bh: calc(var(--u) * 2.5); --p: 0; position: relative; flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: calc(var(--t) * 2.3) var(--bh) calc(var(--t) * 1.8); column-gap: calc(var(--u) * 1.6); row-gap: calc(var(--u) * 0.55); align-items: center; }
.fp-rangs { grid-column: 1; grid-row: 1; position: relative; align-self: stretch; }
.fp-rg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 0.5); padding: 0 calc(var(--u) * 0.4); color: color-mix(in srgb, var(--c) 72%, #fff); font: italic 800 max(12px, calc(var(--t) * 1.75))/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.fp-rg::after { content: ''; position: absolute; left: calc(var(--u) * 0.5); right: calc(var(--u) * 0.5); bottom: 0; height: calc(var(--u) * 0.3); border-radius: 2px; background: color-mix(in srgb, var(--c) 55%, transparent); }
.fp-rg .fin-mini { width: calc(var(--t) * 2.3); height: calc(var(--t) * 2.3); }
.fp-rgn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fin-nb.cache, .fp-rgn.cache { display: none; }
.fp-rg.noir:not(.glitch) .fp-rgn { color: var(--enfer); text-shadow: 0 0 calc(var(--u) * 0.8) rgba(227, 23, 47, 0.7); }
.fp-barre { grid-column: 1; grid-row: 2; position: relative; height: var(--bh); display: flex; gap: calc(var(--u) * 0.35); }
.fp-seg { position: relative; flex: 1 1 0; min-width: 0; border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 0.7); background: color-mix(in srgb, var(--c) 20%, #120E2C); overflow: hidden; font-style: normal; }
.fp-seg.noir { background: #07040A; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.fp-plein { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(clamp(0, calc(var(--p) * var(--n) - var(--i)), 1)); background: linear-gradient(rgba(255, 255, 255, 0.28) 0 40%, rgba(255, 255, 255, 0) 40%), var(--c); }
.fp-seg.glitch .fp-plein { background: linear-gradient(90deg, var(--cyan) 0 4%, transparent 4% 96%, var(--sang) 96%), linear-gradient(transparent 0 30%, rgba(255, 255, 255, 0.6) 30% 38%, transparent 38%), #F4EEFF; }
.fp-seg.franchi { animation: fpFranchi 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes fpFranchi { 40% { transform: scaleY(1.45); } }
.fp-div { position: relative; z-index: 1; display: grid; place-items: center; height: 100%; color: #fff; font: italic 800 max(12px, calc(var(--t) * 1.8))/1 var(--fc); letter-spacing: 1px; text-shadow: var(--out); white-space: nowrap; }
/* ce qui a changé : gagné (des rayures claires), perdu (des hachures rouges) ; et la zone protégée */
.fp-gain { position: absolute; z-index: 2; top: calc(var(--u) * 0.35); bottom: calc(var(--u) * 0.35); opacity: 0; transition: opacity 0.3s; pointer-events: none; border-radius: 3px; }
.fp-gain.up { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0 calc(var(--u) * 0.5), rgba(255, 255, 255, 0) calc(var(--u) * 0.5) calc(var(--u) * 1.1)); }
.fp-gain.down { background: repeating-linear-gradient(135deg, rgba(255, 70, 70, 0.85) 0 calc(var(--u) * 0.5), rgba(255, 70, 70, 0) calc(var(--u) * 0.5) calc(var(--u) * 1.1)); }
.fp.fait .fp-gain { opacity: 1; }
.fp-prot { position: absolute; z-index: 1; top: 0; bottom: 0; border-left: 2px dashed #CFE6FF; background: repeating-linear-gradient(45deg, rgba(154, 200, 255, 0.45) 0 3px, rgba(154, 200, 255, 0) 3px 7px); pointer-events: none; }
.fp-repere { position: absolute; z-index: 3; top: calc(var(--u) * -0.5); bottom: calc(var(--u) * -0.5); width: calc(var(--u) * 0.45); margin-left: calc(var(--u) * -0.225); border-radius: 2px; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); }
/* ta balle, qui roule sur la piste */
.fp-moi { position: absolute; z-index: 4; left: calc(var(--p) * 100%); top: 50%; width: calc(var(--bh) * 1.4); height: calc(var(--bh) * 1.4); translate: -50% -50%; border-radius: 50%; overflow: hidden; border: calc(var(--u) * 0.35) solid var(--ink); background: var(--card); box-shadow: 0 0 0 calc(var(--u) * 0.3) #fff, calc(var(--u) * 0.3) calc(var(--u) * 0.4) 0 calc(var(--u) * 0.3) var(--ink); }
.fp-moi img, .fp-moi .fin-sans { display: block; width: 100%; height: 100%; object-fit: cover; font-size: 10px; }
.fp-seuils { grid-column: 1; grid-row: 3; position: relative; align-self: stretch; }
/* (un peu sous la piste : ta balle, posée pile sur un seuil, ne le cache plus) */
.fp-seuils span { position: absolute; top: calc(var(--u) * 0.45); translate: -50% 0; font: 700 max(12px, calc(var(--t) * 1.45))/1.2 var(--fc); letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; word-spacing: 0.1em; }
.fp-seuils span:first-child { translate: 0 0; }
.fp-seuils span:last-child { translate: -100% 0; }
/* le but : l'emblème du palier suivant, et son nom */
.fp-but { grid-column: 2; grid-row: 1 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 0.2); width: calc(var(--u) * 10); }
.fp-but > .fin-emb { width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); filter: drop-shadow(2px 2px 0 var(--ink)); }
.fp-but-n { order: 2; color: color-mix(in srgb, var(--c) 70%, #fff); font: italic 800 max(12px, calc(var(--t) * 1.6))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; }
.fp-but-n b { color: #fff; }
.fp-but.noir:not(.glitch) .fp-but-n { color: var(--enfer); }
.fp-but.sommet svg { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }
.fp-but.sommet .fp-but-n { color: var(--gold); }
.fp-but.xp .fp-but-n { color: var(--gold); }
.fp-niv { display: grid; place-items: center; width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); border: calc(var(--u) * 0.4) solid var(--ink); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF0A8, var(--gold) 55%, #E9A928); color: var(--ink); font: italic 800 calc(var(--t) * 2.4)/1 var(--fc); box-shadow: 2px 2px 0 var(--ink); }
/* LA CASE OUVERTE DU PLUS HAUT RANG (Hatred, rien au-dessus) : pas de bord à droite, elle file dans le noir et se
   déchire en tranches cyan et rouges ; au bout, la couronne */
.fp-seg.ouvert { border-right-color: transparent; border-radius: calc(var(--u) * 0.7) 0 0 calc(var(--u) * 0.7); -webkit-mask-image: linear-gradient(90deg, #000 72%, rgba(0, 0, 0, 0.25)); mask-image: linear-gradient(90deg, #000 72%, rgba(0, 0, 0, 0.25)); }
.fp-seg.ouvert::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 0 22%, color-mix(in srgb, var(--cyan) 70%, transparent) 22% 32%, transparent 32% 64%, color-mix(in srgb, var(--sang) 75%, transparent) 64% 74%, transparent 74%) 0 0 / 100% 100% no-repeat; opacity: 0.55; clip-path: polygon(62% 0, 100% 0, 100% 100%, 78% 100%); }
.fp.haut .fp-but.sommet .fp-but-n { color: #F4EEFF; text-shadow: -1.5px 0 var(--cyan), 1.5px 0 var(--sang); }
/* (sans paliers donnés : une barre simple ; en attente des résultats : une piste grise qui respire) */
.fp.simple, .fp.att { grid-template-rows: var(--bh); }
.fp.simple .fp-barre, .fp.att .fp-barre { grid-row: 1; }
.fp.att .fp-seg { animation: fpAtt 1.2s ease-in-out infinite alternate; }
@keyframes fpAtt { to { opacity: 0.45; } }
/* la piste du placement : 10 cases, une par partie */
.fpl { flex: 1 1 auto; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: calc(var(--u) * 0.45); height: calc(var(--u) * 3.4); }
.fpl-c { display: grid; place-items: center; border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 0.7); background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.55); font: italic 800 max(12px, calc(var(--t) * 1.7))/1 var(--fc); }
.fpl-c.on { background: var(--gold); color: var(--ink); }
.fpl-c.r-v { background: var(--vert); } .fpl-c.r-d { background: var(--corail); } .fpl-c.r-n { background: #E7E3DA; }
.fin-intro .fpl-c.neuf:not(.pop) { background: rgba(255, 255, 255, 0.1); color: transparent; }
.bd-fin:not(.fin-intro) .fpl-c.neuf, .fpl-c.neuf.pop { animation: finPip 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; box-shadow: 0 0 0 calc(var(--u) * 0.35) #fff; }
@keyframes finPip { 0% { transform: scale(0.3); } 60% { transform: scale(1.35); } }

/* LE BANDEAU DU SPECTATEUR : l'œil, le score des deux équipes, la carte et la durée */
.fb-piece { display: grid; place-items: center; border: calc(var(--u) * 0.45) solid var(--ink); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF0A8, var(--gold) 55%, #E9A928); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); }
.fb-piece b { font: italic 800 calc(var(--u) * 3.6)/1 var(--fc); color: var(--ink); }
.fb-piece.oeil { background: radial-gradient(circle at 35% 30%, #E9DAFF, #B884FF 60%, #8E44E8); }
.fb-piece.oeil svg { width: 66%; height: 66%; }
.fin-bilan.xp { --rk: var(--gold); }
.fin-bilan.spec { --rk: #B884FF; }
.fb-eq { flex: 0 1 auto; min-width: 0; padding: calc(var(--u) * 0.4) calc(var(--u) * 1.1) calc(var(--u) * 0.5); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 0.9); background: #4FB6F0; color: var(--ink); box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); font: italic 800 calc(var(--t) * 2.4)/1 var(--fc); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-eq.b { background: #F0606A; }
.fb-eq.gagne::after { content: "\2605"; margin-left: calc(var(--u) * 0.6); }
.fb-score { flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.8); font: italic 800 calc(var(--t) * 4)/1 var(--fc); color: #fff; text-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
.fb-score i { font-style: normal; opacity: 0.7; }
.fb-sc-lb { flex: none; font: 700 max(12px, calc(var(--t) * 1.6))/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.fb-info { flex: none; padding: calc(var(--u) * 0.3) calc(var(--u) * 0.9) calc(var(--u) * 0.35); border-radius: calc(var(--u) * 0.7); background: rgba(255, 255, 255, 0.12); font: 700 max(12px, calc(var(--t) * 1.7))/1.1 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: #fff; white-space: nowrap; }
.fb-mvp { flex: none; margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 1.3); padding: calc(var(--u) * 0.7) calc(var(--u) * 1.6) calc(var(--u) * 0.7) calc(var(--u) * 0.9); border-radius: calc(var(--u) * 1.2); background: rgba(255, 255, 255, 0.08); }
.fb-mvp-b { flex: none; width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); border-radius: 50%; overflow: hidden; border: calc(var(--u) * 0.4) solid var(--ink); background: var(--card); box-shadow: 0 0 0 calc(var(--u) * 0.45) var(--gold), 0 0 0 calc(var(--u) * 0.8) var(--ink); }
.fb-mvp-b img, .fb-mvp-b .fin-sans { display: block; width: 100%; height: 100%; object-fit: cover; }
.fb-mvp-t { display: flex; flex-direction: column; gap: calc(var(--u) * 0.35); min-width: 0; }
.fb-mvp-t b { font: italic 800 calc(var(--t) * 3)/1 var(--fc); text-transform: uppercase; white-space: nowrap; text-shadow: 2px 2px 0 var(--ink); }
.fb-mvp-s { font: 600 max(12px, calc(var(--t) * 1.6))/1.2 var(--fb); color: rgba(255, 255, 255, 0.82); white-space: nowrap; }

/* les boutons : « Salon » (blanc) puis « Revanche » (or), toujours en bas à droite */
.fin-btns { grid-area: btns; display: flex; align-items: stretch; gap: calc(var(--u) * 1.6); }
.fin-b { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 0.35); min-width: 44px; min-height: 44px; padding: calc(var(--u) * 1) calc(var(--u) * 2.6) calc(var(--u) * 1.2); border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.4); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); cursor: pointer; text-transform: uppercase; transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease; }
.fin-b:hover:not(:disabled) { transform: translate(calc(var(--u) * -0.2), calc(var(--u) * -0.2)); box-shadow: calc(var(--u) * 0.8) calc(var(--u) * 0.8) 0 var(--ink); }
.fin-b:active:not(:disabled) { transform: translate(calc(var(--u) * 0.4), calc(var(--u) * 0.4)); box-shadow: calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0 var(--ink); }
.fin-b b { font: italic 800 calc(var(--t) * 3.4)/1 var(--fc); white-space: nowrap; padding-right: 2px; }
.fin-b kbd { display: inline-block; padding: 2px 6px 3px; border: 2px solid var(--ink); border-bottom-width: 3px; border-radius: 6px; background: #fff; color: var(--ink); font: 800 max(12px, calc(var(--t) * 1.3))/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; opacity: 0.7; }
.fin-tactile .fin-b kbd, .fin-tactile .fin-notif kbd { display: none; }
.fin-salon { min-width: calc(var(--u) * 15); }
/* (pendant le décompte : « Salon » dit ce qu'il fait, et en combien de temps) */
.fin-salon-s { font: 700 max(12px, calc(var(--t) * 1.75))/1 var(--fc); letter-spacing: 1px; white-space: nowrap; color: #C8323C; }
.fin-salon.halo { animation: finHalo 1s ease-out infinite; }
@keyframes finHalo { from { box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink), 0 0 0 0 rgba(255, 255, 255, 0.95); } to { box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink), 0 0 0 calc(var(--u) * 1.8) rgba(255, 255, 255, 0); } }
.fin-emo { padding: calc(var(--u) * 1) calc(var(--u) * 1.4); }
.fin-emo svg { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); }
/* (une largeur FIXE : quel que soit son état, « Revanche » ne grandit pas et « Salon » ne bouge pas sous le doigt) */
.fin-rev { width: calc(var(--u) * 34); background: var(--gold); }
.fin-rev b, .fin-rev-s { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.fin-rev .fin-rev-t { font-size: calc(var(--t) * 4.4); }
.fin-rev-s { font: 700 max(12px, calc(var(--t) * 1.5))/1 var(--fc); letter-spacing: 1px; opacity: 0.75; white-space: nowrap; }
/* (la touche sous le libellé, comme « Salon » : en haut à droite, elle passait sur « REVANCHE » à 1 366 px) */
.fin-rev kbd { margin-top: calc(var(--u) * 0.2); }
.fin-rev:hover:not(:disabled) { background: #FFDC5E; }
.fin-rev.on { background: var(--vert); }
.fin-rev.on:hover:not(:disabled) { background: #5BE596; }
.fin-rev.verrou { cursor: default; }
/* (2 VS 2 : ton coéquipier a accepté pour ton équipe, pas toi : ni ✓ ni vert, un or pâle et un pointillé) */
.fin-rev.accord { background: #FFE9A3; box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); outline: calc(var(--u) * 0.3) dashed rgba(21, 21, 21, 0.45); outline-offset: calc(var(--u) * -1); }
.fin-rev.verrou kbd { display: none; }
.fin-rev.off, .fin-rev.gris { background: #BEB8AE; color: rgba(21, 21, 21, 0.62); cursor: default; box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); }
.fin-rev.off kbd, .fin-rev.gris kbd { display: none; }
.fin-rev.pulse { animation: finPulse 1.1s ease-in-out infinite; }
@keyframes finPulse { 50% { box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink), 0 0 0 calc(var(--u) * 0.9) rgba(255, 210, 63, 0.75); } }
.fin-temps { position: absolute; left: calc(var(--u) * 1.4); right: calc(var(--u) * 1.4); bottom: calc(var(--u) * 0.55); height: calc(var(--u) * 0.5); border-radius: calc(var(--u) * 0.3); background: rgba(21, 21, 21, 0.18); overflow: hidden; }
.fin-temps > i { display: block; height: 100%; background: var(--ink); transform-origin: left center; }

/* la bulle d'explication (« ×½ », les icônes des stats) */
.fin-bulle { position: absolute; z-index: 30; max-width: min(92vw, calc(var(--u) * 60)); display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.6) calc(var(--u) * 1.4); padding: calc(var(--u) * 0.8) calc(var(--u) * 1.2); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--ink); font: 600 max(12px, calc(var(--t) * 1.7))/1.3 var(--fb); pointer-events: none; animation: finPop 0.2s ease-out both; }
.fin-bulle svg { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); flex: none; }

/* ═══ « NOUVEL OBJET ! » : une carte posée devant la scène, « OK » et « Équiper » (les boutons du bas restent libres) ═══ */
.fin-notif { position: absolute; z-index: 15; left: 50%; top: 44%; translate: -50% -50%; width: min(calc(var(--u) * 62), calc(100vw - var(--u) * 8)); padding: 0 0 calc(var(--u) * 1.6); border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 1.8); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.9) calc(var(--u) * 0.9) 0 var(--ink), 0 0 0 100vmax rgba(10, 6, 26, 0.45); overflow: hidden; }
.fin-notif.entre { animation: fnEntre 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.fin-notif.part { animation: fmPart 0.22s ease-in forwards; }
@keyframes fnEntre { from { transform: translateY(30%) scale(0.85); opacity: 0; } }
.fn-tete { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1); padding: calc(var(--u) * 0.8) calc(var(--u) * 2) calc(var(--u) * 0.9); border-bottom: calc(var(--u) * 0.45) solid var(--ink); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0 calc(var(--u) * 1), rgba(255, 255, 255, 0) calc(var(--u) * 1) calc(var(--u) * 2)), var(--gold); font: italic 800 calc(var(--t) * 3.2)/1 var(--fc); text-transform: uppercase; letter-spacing: 1px; }
.fn-tete small { font: 800 max(12px, calc(var(--t) * 1.8))/1 var(--fc); opacity: 0.7; }
.fn-corps { display: flex; align-items: center; gap: calc(var(--u) * 2.2); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.2) calc(var(--u) * 1.4); }
.fn-vue { flex: none; width: calc(var(--u) * 15); height: calc(var(--u) * 15); display: grid; place-items: center; border-radius: calc(var(--u) * 1.4); background: radial-gradient(circle, #3B2F8C, #1B1544); box-shadow: inset 0 0 0 calc(var(--u) * 0.4) var(--ink); }
.fn-txt { display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); min-width: 0; }
.fn-nom { font: italic 800 calc(var(--t) * 3.2)/1.05 var(--fc); text-transform: uppercase; }
.fn-desc { font: 600 max(12px, calc(var(--t) * 1.8))/1.3 var(--fb); }
.fn-ou { font: 700 max(12px, calc(var(--t) * 1.5))/1.2 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: rgba(21, 21, 21, 0.55); }
.fn-btns { display: flex; justify-content: flex-end; gap: calc(var(--u) * 1.4); padding: 0 calc(var(--u) * 2.2); }
.fn-btns button { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.8); min-height: 44px; padding: calc(var(--u) * 0.8) calc(var(--u) * 2.6) calc(var(--u) * 0.9); border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.2); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--ink); font: italic 800 calc(var(--t) * 2.8)/1 var(--fc); text-transform: uppercase; cursor: pointer; }
.fn-btns .fn-eq { background: var(--gold); }
.fn-btns .fn-eq.fait { background: var(--vert); cursor: default; }
.fn-btns kbd { padding: 2px 5px 3px; border: 2px solid var(--ink); border-bottom-width: 3px; border-radius: 5px; background: #fff; font: 800 max(12px, calc(var(--t) * 1.2))/1 var(--fc); font-style: normal; opacity: 0.7; }
/* l'aperçu d'un objet (provisoire, ou les vrais dessins via opts.objet) : le cercle autour de ta balle, le cadre VS */
.fin-ap { position: relative; display: block; width: 100%; height: 100%; }
.fin-ap.cercle .fin-ap-b { position: absolute; left: 27%; top: 27%; width: 46%; height: 46%; border-radius: 50%; overflow: hidden; border: 2px solid var(--ink); background: var(--card); }
.fin-ap.cercle .fin-decor { position: absolute; inset: 2%; width: 96%; height: 96%; }
.fin-ap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fin-ap.cadre { display: grid; place-items: center; }
.fin-ap-carte { display: block; width: 62%; height: 86%; border: calc(var(--u) * 0.5) solid var(--c); border-radius: calc(var(--u) * 0.8); background: #2B2163; box-shadow: 0 0 0 calc(var(--u) * 0.3) var(--ink), inset 0 0 0 calc(var(--u) * 0.3) var(--ink); overflow: hidden; }
.fin-ap-carte img { width: 70%; height: auto; aspect-ratio: 1; margin: 22% auto 0; border-radius: 50%; border: 2px solid var(--ink); }

/* ─── LE DÉROULÉ (§7.2) : le titre se tamponne, les socles montent (gagnants d'abord), la balle saute dessus, les
   chiffres comptent (js), les Elo comptent, puis le bandeau ─── */
.fin-intro .fin-h { animation: finTampon 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes finTampon { 0% { transform: scale(1.8); opacity: 0; } 60% { transform: scale(0.94); opacity: 1; } }
.fin-intro .fin-mode, .fin-intro .fin-serie, .fin-intro .fin-sous { animation: finIn 0.4s 0.2s ease-out both; }
.fin-intro .fin-col { animation: finMonte 0.6s cubic-bezier(0.2, 1.12, 0.4, 1) both; animation-delay: calc(0.3s + var(--k, 0) * 0.12s); }
@keyframes finMonte { from { transform: translateY(75%); opacity: 0; } 25% { opacity: 1; } }
.fin-intro .fin-haut { animation: finSaut 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; animation-delay: calc(0.55s + var(--k, 0) * 0.12s); }
@keyframes finSaut { from { transform: translateY(-30%) scale(0.5); opacity: 0; } }
.fin-intro .fin-liste { animation: finListe 0.5s 0.7s cubic-bezier(0.2, 1.1, 0.4, 1) both; }
@keyframes finListe { from { transform: translateX(12%); opacity: 0; } }
.fin-intro .fin-btns { animation: finIn 0.3s ease-out both; }
.fin-intro .fin-podium::after { animation: finIn 0.3s ease-out both; }

/* ═══ LA MONTÉE DE RANG (É12, §5.6) : plein écran, un appui la passe ═══
   Trois temps (fin.js, montee) : 1. l'ANCIEN rang (son emblème, son nom, ta balle et son cercle, ton Elo qui compte, ta
   balle qui roule sur la piste jusqu'au seuil) ; 2. l'emblème tremble, se fissure (1,1 s) et vole en éclats dans un
   éclair blanc (classe .casse, 1,45 s) ; 3. le fond prend la couleur du NOUVEAU rang, son emblème se tamponne, son nom
   claque, ta balle prend son nouveau cercle (classe .neuf, 1,75 s) ; la PREMIÈRE fois, ses récompenses arrivent.
   --rk0 : la couleur de l'ancien rang ; --rk : celle du nouveau. */
.fin-montee { --ring: var(--rk0); position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; overflow: hidden; padding: calc(var(--u) * 2 + var(--f-t)) calc(var(--u) * 3 + var(--f-r)) calc(var(--u) * 6 + var(--f-b)) calc(var(--u) * 3 + var(--f-l)); background: #0C081E; color: #fff; cursor: pointer; animation: finIn 0.25s ease-out both; }
.fin-montee.neuf { --ring: var(--rk); }
.fin-montee.part { animation: fmPart 0.3s ease-in forwards; }
@keyframes fmPart { to { opacity: 0; } }
.fm-fond0 { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rk0) 42%, #0C081E) 0, color-mix(in srgb, var(--rk0) 16%, #0C081E) 40%, #0C081E 85%); }
.fm-fond { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rk) 55%, #fff) 0, var(--rk) 30%, color-mix(in srgb, var(--rk) 30%, #0B0820) 92%); clip-path: circle(0% at 50% 42%); }
/* (les rangs noirs : le fond reste sombre, leur couleur n'est qu'une lueur ; Hatred glitche en rouge et cyan) */
.fin-montee.noir .fm-fond { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rk) 45%, #07040A) 0, color-mix(in srgb, var(--rk) 18%, #07040A) 34%, #050308 80%); }
.fin-montee[data-k="hatred"] .fm-fond { background: linear-gradient(transparent 0 31%, rgba(46, 242, 255, 0.16) 31% 33%, transparent 33% 64%, rgba(255, 45, 85, 0.18) 64% 66.5%, transparent 66.5%), radial-gradient(circle at 50% 42%, #3A3149 0, #120A1C 36%, #050308 80%); }
.fin-montee.neuf .fm-fond { animation: fmFond 0.55s cubic-bezier(0.3, 0.8, 0.3, 1) forwards; }
@keyframes fmFond { to { clip-path: circle(80% at 50% 42%); } }
.fm-rayons { position: absolute; left: 50%; top: 42%; width: max(220vw, 220vh); aspect-ratio: 1; translate: -50% -50%; background: repeating-conic-gradient(rgba(255, 255, 255, 0.16) 0 6deg, rgba(255, 255, 255, 0) 6deg 12deg); opacity: 0; }
.fin-montee.noir .fm-rayons { background: repeating-conic-gradient(color-mix(in srgb, var(--rk) 22%, transparent) 0 6deg, rgba(255, 255, 255, 0) 6deg 12deg); }
/* (Hatred n'est pas un deuxième Hellborn : ses rayons sont blancs et froids, sur le noir) */
.fin-montee[data-k="hatred"] .fm-rayons { background: repeating-conic-gradient(rgba(244, 238, 255, 0.075) 0 6deg, rgba(255, 255, 255, 0) 6deg 12deg); }
.fin-montee.neuf .fm-rayons { animation: fmRayonsIn 0.4s 0.1s forwards, finRayons 40s linear infinite; }
@keyframes fmRayonsIn { to { opacity: 1; } }
/* l'éclair, quand l'ancien emblème éclate */
.fm-flash { position: absolute; left: 50%; top: 42%; width: 40vmin; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff 0, rgba(255, 255, 255, 0.85) 35%, rgba(255, 255, 255, 0) 70%); opacity: 0; pointer-events: none; z-index: 3; }
.fin-montee.casse .fm-flash { animation: fmFlash 0.5s ease-out forwards; }
@keyframes fmFlash { 0% { opacity: 0; transform: scale(0.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(3.2); } }
.fm-centre { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* l'étiquette du haut : le format (l'ancien rang), puis « Nouveau rang ! » */
.fm-sur { position: relative; z-index: 2; display: grid; margin: 0 0 calc(var(--u) * 1); }
.fm-sur > span { grid-area: 1 / 1; justify-self: center; padding: calc(var(--u) * 0.5) calc(var(--u) * 2) calc(var(--u) * 0.7); border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.2); background: var(--ink); color: #fff; font: italic 800 calc(var(--u) * 3)/1 var(--fc); letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; }
.fm-sur .a { background: rgba(21, 21, 21, 0.7); border-color: rgba(255, 255, 255, 0.25); font-size: calc(var(--u) * 2.4); animation: fmApp 0.3s 0.1s both; opacity: 0; }
.fm-sur .b { background: var(--gold); color: var(--ink); opacity: 0; }
.fin-montee.casse .fm-sur .a { animation: fmOut 0.15s forwards; }
.fin-montee.neuf .fm-sur .b { animation: fmPop 0.4s 0.15s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes fmApp { to { opacity: 1; } }
@keyframes fmOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fmPop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
/* les emblèmes : l'ancien (en 7 éclats qui tiennent ensemble), ses fissures, le nouveau */
.fm-embs { position: relative; width: min(calc(var(--u) * 34), 36vh); aspect-ratio: 1; animation: fmPop 0.45s 0.05s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.fin-montee.a-reco .fm-embs { width: min(calc(var(--u) * 27), 30vh); }
.fm-ancien, .fm-nouveau { position: absolute; inset: 0; z-index: 1; }
.fm-ancien { animation: fmTremble 0.4s 1.05s ease-in-out both; }
@keyframes fmTremble { 10%, 50%, 90% { transform: translate(-2%, 1%) rotate(-3deg); } 30%, 70% { transform: translate(2%, -1%) rotate(3deg); } }
/* (tant que l'emblème tient, on montre son dessin ENTIER : les éclats découpés laisseraient voir de fines coutures) */
.fm-entier, .fm-ec { position: absolute; inset: 0; }
.fm-ec { visibility: hidden; }
.fin-montee.casse .fm-ec { visibility: visible; }
.fin-montee.casse .fm-entier { visibility: hidden; }
.fm-entier .fin-emb, .fm-ec .fin-emb, .fm-nouveau .fin-emb { filter: drop-shadow(calc(var(--u) * 0.9) calc(var(--u) * 1.1) 0 var(--ink)); }
.fin-montee.casse .fm-ec { animation: fmEclat 0.7s cubic-bezier(0.2, 0.6, 0.35, 1) forwards; }
@keyframes fmEclat { 0% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0.85); } }
.fm-fissures { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; }
/* (un seul tracé pour les 7 fissures : le pointillé court d'un bout à l'autre, d'où 400, plus long que le tout) */
.fm-fissures path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400 400; stroke-dashoffset: 400; animation: fmFissure 0.3s 1.08s ease-in forwards; }
.fm-fissures .n { stroke: var(--ink); stroke-width: 3.2; }
.fm-fissures .b { stroke: #fff; stroke-width: 1.2; }
@keyframes fmFissure { to { stroke-dashoffset: 0; } }
.fin-montee.casse .fm-fissures { opacity: 0; }
.fm-tache { position: absolute; left: 50%; top: 50%; z-index: 0; width: 150%; height: 150%; translate: -50% -50%; fill: color-mix(in srgb, var(--rk) 45%, #151515); opacity: 0; transform: scale(0.4) rotate(-20deg); }
.fin-montee.noir .fm-tache { fill: #050308; }
.fin-montee.neuf .fm-tache { animation: fmTache 0.5s 0.1s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
@keyframes fmTache { to { opacity: 1; transform: none; } }
.fm-nouveau { opacity: 0; }
.fin-montee.neuf .fm-nouveau { animation: fmSceau 0.6s 0.02s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
@keyframes fmSceau { 0% { transform: scale(1.5); opacity: 0; } 55% { transform: scale(0.92); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
/* le nom : l'ancien (à sa couleur), qui tombe ; puis le nouveau, qui claque */
.fm-noms { position: relative; z-index: 2; display: grid; margin-top: calc(var(--u) * 1); }
.fm-nom { grid-area: 1 / 1; justify-self: center; margin: 0; font: italic 800 calc(var(--u) * 8.4)/0.95 var(--fc); text-transform: uppercase; white-space: nowrap; text-shadow: 7px 7px 0 var(--ink), -4px -4px 0 var(--ink), 4px -4px 0 var(--ink), -4px 4px 0 var(--ink), 0 5px 0 var(--ink), 5px 0 0 var(--ink); }
.fm-nom.a { color: color-mix(in srgb, var(--rk0) 45%, #fff); animation: fmPop 0.35s 0.15s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.fm-nom.b { color: color-mix(in srgb, var(--rk) 40%, #fff); opacity: 0; }
.fin-montee[data-k="hatred"] .fm-nom.b { color: #F4EEFF; text-shadow: -5px 0 var(--cyan), 5px 0 var(--sang), 7px 7px 0 var(--ink), -4px -4px 0 var(--ink), 4px -4px 0 var(--ink), -4px 4px 0 var(--ink); }
/* Hellborn : du rouge sur le noir (le nouveau rang, ou l'ancien quand il part vers Hatred) */
.fin-montee[data-k="hellborn"] .fm-nom.b, .fin-montee[data-k0="hellborn"] .fm-nom.a { color: var(--enfer); }
.fin-montee.casse .fm-nom.a { animation: fmNomOut 0.25s ease-in forwards; }
@keyframes fmNomOut { from { opacity: 1; } to { opacity: 0; transform: translateY(35%) rotate(-4deg); } }
.fin-montee.neuf .fm-nom.b { animation: fmNom 0.45s 0.25s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes fmNom { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
.fm-fmt { position: relative; z-index: 2; margin: calc(var(--u) * 1.2) 0 0; padding: calc(var(--u) * 0.5) calc(var(--u) * 1.4) calc(var(--u) * 0.6); border-radius: calc(var(--u) * 1); background: rgba(21, 21, 21, 0.72); font: 700 max(12px, calc(var(--t) * 2.1))/1 var(--fc); letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; opacity: 0; }
.fin-montee.neuf .fm-fmt { animation: fmApp 0.3s 0.5s both; }
/* en bas : ta balle (son cercle passe de l'ancien rang au nouveau), ton Elo qui compte, la piste des paliers */
.fm-bas { position: relative; z-index: 2; display: flex; align-items: center; gap: calc(var(--u) * 3.6); margin-top: calc(var(--u) * 1.8); padding: calc(var(--u) * 1.6) calc(var(--u) * 2.2) calc(var(--u) * 1.6) calc(var(--u) * 4.4); border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.6); background: rgba(16, 11, 38, 0.86); box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); animation: fmApp 0.3s 0.2s both; opacity: 0; }
.fm-balle { position: relative; flex: none; width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); }
.fm-balle-i { position: absolute; inset: 0; z-index: 1; border-radius: 50%; overflow: hidden; border: calc(var(--u) * 0.4) solid var(--ink); background: var(--card); }
.fm-balle img, .fm-balle .fin-sans { display: block; width: 100%; height: 100%; object-fit: cover; }
.fm-dec0, .fm-dec1 { position: absolute; z-index: 2; left: 50%; top: 50%; width: 185.2%; height: 185.2%; translate: -50% -50%; pointer-events: none; transition: opacity 0.25s, transform 0.4s cubic-bezier(0.2, 1.6, 0.4, 1); }
.fm-dec0 > *, .fm-dec1 > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.fm-dec1 { opacity: 0; transform: scale(1.4); }
.fin-montee.casse .fm-dec0 { opacity: 0; }
.fin-montee.neuf .fm-dec1 { opacity: 1; transform: none; }
.fm-prog { display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 0.8); min-width: calc(var(--u) * 60); }
.fm-elo { display: flex; align-items: center; gap: calc(var(--u) * 1); font: italic 800 calc(var(--t) * 3)/1 var(--fc); white-space: nowrap; color: rgba(255, 255, 255, 0.85); }
.fm-elo i { font-style: normal; opacity: 0.75; }
.fm-elo b { color: #fff; }
.fm-delta { flex: none; margin-left: auto; padding: calc(var(--u) * 0.35) calc(var(--u) * 1.1) calc(var(--u) * 0.45); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 0.9); color: var(--ink); background: var(--vert); box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); font: italic 800 calc(var(--t) * 2.8)/1 var(--fc); text-transform: uppercase; white-space: nowrap; animation: fmPop 0.35s 1.3s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.fm-delta.down { background: var(--corail); }
/* les récompenses de la première obtention d'un rang (Max : le cadre VS et le cercle) */
.fm-reco { position: relative; z-index: 2; display: flex; align-items: center; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 1.6); opacity: 0; }
.fin-montee.neuf .fm-reco { animation: fmApp 0.3s 0.6s both; }
.fm-reco-t { padding: calc(var(--u) * 0.5) calc(var(--u) * 1.4) calc(var(--u) * 0.6); border-radius: calc(var(--u) * 1); background: var(--gold); color: var(--ink); font: italic 800 calc(var(--t) * 2.2)/1.1 var(--fc); text-transform: uppercase; letter-spacing: 1px; box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); }
.fm-reco-l { display: flex; gap: calc(var(--u) * 1.6); }
.fm-obj { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * 0.6) calc(var(--u) * 1.4) calc(var(--u) * 0.6) calc(var(--u) * 0.6); border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.2); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); opacity: 0; }
.fin-montee.neuf .fm-obj { animation: fmPop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) both; animation-delay: calc(0.75s + var(--i) * 0.15s); }
.fm-obj > .fin-ap { width: calc(var(--u) * 7); height: calc(var(--u) * 7); flex: none; border-radius: calc(var(--u) * 0.8); background: radial-gradient(circle, #3B2F8C, #1B1544); }
.fm-obj-n { font: italic 800 calc(var(--t) * 2.2)/1 var(--fc); text-transform: uppercase; white-space: nowrap; }
.fm-obj-new { position: absolute; top: 0; right: calc(var(--u) * -0.8); translate: 0 -55%; padding: 1px calc(var(--u) * 0.6) 2px; border: 2px solid var(--ink); border-radius: calc(var(--u) * 0.6); background: var(--corail); color: #fff; font: italic 800 max(12px, calc(var(--t) * 1.4))/1 var(--fc); text-transform: uppercase; white-space: nowrap; }
/* (sur n'importe quel fond, même un jaune clair : le texte sur une pastille sombre) */
.fm-suite { position: absolute; z-index: 2; left: var(--f-l); right: var(--f-r); bottom: calc(var(--u) * 2.4 + var(--f-b)); margin: 0; text-align: center; opacity: 0; animation: fmApp 0.3s 2.5s forwards; }
.fm-suite span { display: inline-block; padding: calc(var(--u) * 0.5) calc(var(--u) * 1.6) calc(var(--u) * 0.6); border-radius: calc(var(--u) * 1); background: rgba(12, 8, 30, 0.82); color: #fff; font: 700 max(12px, calc(var(--t) * 1.8))/1 var(--fc); letter-spacing: 2px; text-transform: uppercase; }
/* la révélation (fin du placement) : le « ? » tremble pendant le roulement de tambour, puis éclate */
.fin-montee.revele .fm-ancien { animation: fmTremble 0.5s 0.35s ease-in-out 2 both; }
.fin-montee.revele .fm-fissures path { animation-delay: 1.1s; }
.fin-montee.revele .fm-nom.a { color: rgba(255, 255, 255, 0.8); }
/* (le suspense : ton Elo ne se montre qu'avec ton rang) */
.fin-montee.revele .fm-bas { animation: none; opacity: 0; }
.fin-montee.revele.neuf .fm-bas { animation: fmApp 0.3s 0.45s both; }
.fin-montee.revele .fm-prog { min-width: 0; }

/* ═══════════════ LA MISE EN PAGE COMPACTE : téléphone en paysage (et toute fenêtre de 520 px de haut ou moins) ═══════════════
   --q vaut 1 px à 667 × 300 et suit la place réelle (encoches déduites). Budget vertical à 667 × 300 : 7 + en-tête 32 +
   scène 172 + bandeau, état et boutons 76 + 7 (les marges comprises). */
@media (max-height: 520px) {
  .bd-fin {
    --q: min(calc(100vh / 300), calc((100vw - var(--f-l) - var(--f-r)) / 667));
    --cw: calc(var(--q) * 140); --bs: calc(var(--q) * 36); --mh: calc(var(--q) * 12);
    --t: var(--u); --fit-min: 12px;
    padding: calc(var(--q) * 7 + var(--f-t)) calc(var(--q) * 14 + var(--f-r)) calc(var(--q) * 7 + var(--f-b)) calc(var(--q) * 14 + var(--f-l));
  }
  .bd-fin[data-lay="cols"][data-n="2"] { --cw: calc(var(--q) * 196); --bs: calc(var(--q) * 40); --mh: calc(var(--q) * 12); }
  .bd-fin[data-lay="cols"][data-n="3"] { --cw: calc(var(--q) * 160); --bs: calc(var(--q) * 38); }
  .bd-fin[data-lay="cols"][data-n="5"], .bd-fin[data-lay="cols"][data-n="6"] { --cw: calc(var(--q) * 104); --bs: calc(var(--q) * 32); --mh: calc(var(--q) * 6); }
  .bd-fin[data-lay="grand"] { --cw: calc(var(--q) * 100); --bs: calc(var(--q) * 34); --mh: calc(var(--q) * 9); }
  /* l'en-tête sur une ligne : le mode (et la série) à gauche, le titre au milieu, le sous-titre à droite */
  .fin-tete { grid-template-areas: "g titre d"; column-gap: calc(var(--q) * 10); align-items: center; }
  /* (la série se range À CÔTÉ du mode quand il y a la place : empilée dessous, elle grandissait l'en-tête et la légende
     des icônes passait sur les cartes) */
  .fin-g { display: flex; flex-flow: row wrap; align-items: center; gap: 3px 4px; grid-area: g; min-width: 0; }
  .fin-g > .fin-mode { flex: 0 1 auto; min-width: 0; }
  .fin-g > .fin-serie { flex: none; }
  .fin-mode, .fin-serie { padding: calc(var(--q) * 3) calc(var(--q) * 8) calc(var(--q) * 4); border-width: 2px; border-radius: 7px; box-shadow: 2px 2px 0 var(--ink); font-size: 12px; line-height: 1.15; }
  .fin-mode { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .fin-serie { justify-self: start; }
  .fin-h { font-size: calc(var(--q) * 29); text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 2px 0 var(--ink); padding: 0 4px 2px; }
  .fin-h[data-long] { font-size: calc(var(--q) * 23); }
  .fin-sous { grid-area: d; justify-self: end; align-self: center; margin: 0; padding: 2px 8px 3px; border-radius: 7px; font-size: 12px; line-height: 1.2; white-space: normal; text-align: right; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .bd-fin.fin-annule .fin-bandeau-rouge { padding: 4px 12px 5px; border-width: 3px; border-radius: 9px; box-shadow: 3px 3px 0 var(--ink); font-size: max(13px, calc(var(--q) * 16)); max-width: calc(100vw - var(--q) * 28 - var(--f-l) - var(--f-r)); }
  .bd-fin.fin-annule .fin-tete { min-height: calc(var(--q) * 30); }

  .fin-scene { margin-top: calc(var(--q) * 2); gap: calc(var(--q) * 10); padding: calc(var(--bs) * 0.08) 0 calc(var(--q) * 4); }
  .fin-podium { gap: calc(var(--q) * 16); }
  .bd-fin:not([data-equipes]) .fin-podium { gap: calc(var(--q) * 10); }
  .bd-fin[data-lay="cols"][data-n="2"] .fin-podium { gap: calc(var(--q) * 44); }
  .bd-fin[data-lay="cols"][data-n="5"] .fin-podium, .bd-fin[data-lay="cols"][data-n="6"] .fin-podium { gap: calc(var(--q) * 12); }
  .fin-camp, .bd-fin[data-lay="cols"][data-n="5"] .fin-camp, .bd-fin[data-lay="cols"][data-n="6"] .fin-camp { gap: calc(var(--q) * 6); }
  .fin-podium::after { left: calc(var(--q) * -10); right: calc(var(--q) * -10); bottom: calc(var(--q) * -4); height: calc(var(--q) * 7); border-width: 2px; border-radius: 4px; box-shadow: 0 2px 0 rgba(21, 21, 21, 0.4); }

  .fin-balle { border-width: 2.5px; box-shadow: 2px 3px 0 rgba(21, 21, 21, 0.45); }
  .fin-balle.plac::after { inset: calc(var(--q) * -4); border-width: 2px; }
  .fin-col.gagne::before { top: calc(var(--bs) * -0.4); height: calc(var(--bs) * 2.4); }

  .fin-pilier { margin: 0 calc(var(--q) * 7); }
  .fin-pilier::before { top: calc(var(--q) * 4); bottom: calc(var(--q) * 3); border-width: 0 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 28%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.3)), repeating-linear-gradient(90deg, var(--p-fut) 0 calc(var(--q) * 9), var(--p-fut2) calc(var(--q) * 9) calc(var(--q) * 11)); }
  .fin-col[data-th="or"] .fin-pilier::before { background: linear-gradient(90deg, #FFD23F 0 calc(var(--q) * 3), rgba(255, 255, 255, 0) calc(var(--q) * 3) calc(100% - var(--q) * 3), #E9A928 calc(100% - var(--q) * 3)), repeating-linear-gradient(90deg, var(--p-fut) 0 calc(var(--q) * 9), var(--p-fut2) calc(var(--q) * 9) calc(var(--q) * 11)); }
  .fin-chap { height: calc(var(--q) * 8); margin: 0 calc(var(--q) * -6); border-width: 2px; border-radius: 4px; box-shadow: 0 2px 0 rgba(21, 21, 21, 0.35); }
  .fin-col[data-th="or"] .fin-chap::before { width: 6px; height: 6px; border-width: 1.5px; box-shadow: none; }
  .fin-col[data-th="or"] .fin-chap::after { left: -5px; right: -5px; height: 10px; background: radial-gradient(circle at 5px 50%, #FFD23F 0 2.5px, var(--ink) 2.5px 4.2px, transparent 4.5px), radial-gradient(circle at calc(100% - 5px) 50%, #FFD23F 0 2.5px, var(--ink) 2.5px 4.2px, transparent 4.5px); }
  .fin-socle { margin: auto calc(var(--q) * -8) 0; height: calc(var(--q) * 5); border-width: 2px; border-radius: 3px 3px 0 0; }

  .fin-carte { margin: calc(var(--q) * 6) calc(var(--q) * 1) calc(var(--q) * 13); padding: calc(var(--q) * 8) calc(var(--q) * 6) calc(var(--q) * 3); border-width: 2px; border-radius: 7px; box-shadow: 3px 3px 0 var(--ink); }
  .fin-col.moi .fin-carte { outline-width: 2px; outline-offset: 1px; }
  .fin-col.camp-a .fin-carte::before, .fin-col.camp-b .fin-carte::before { left: 6px; right: 6px; top: 2px; height: 3px; }
  .fin-place { padding: 1px 7px 2px; border-width: 2px; border-radius: 6px; box-shadow: 2px 2px 0 var(--ink); font-size: max(15px, calc(var(--q) * 15)); translate: -50% -70%; }
  .fin-place small { font-size: 12px; vertical-align: 0.3em; }
  .bd-fin[data-lay="grand"] .fin-place { font-size: max(15px, calc(var(--q) * 15)); }
  .fin-laurier { width: calc(var(--q) * 66); height: calc(var(--q) * 20); translate: -50% -86%; filter: drop-shadow(1px 1px 0 var(--ink)); }
  .fin-tg { left: 5px; translate: 0 -58%; }
  .fin-toi, .fin-tag { padding: 1px 4px 2px; border-width: 1.5px; border-radius: 4px; font-size: 12px; }
  .fin-tg.fin-toi, .fin-tg.fin-tag, .fin-pend .fin-tag { box-shadow: 1.5px 1.5px 0 var(--ink); }
  .fin-pend { translate: -50% 3px; }

  .fin-veut, .fin-pend .fin-tag.parti { padding: 1px 6px 2px; border-width: 2px; border-radius: 5px; box-shadow: 2px 2px 0 var(--ink); font-size: 12px; }
  .fin-nom b { font-size: max(13px, calc(var(--q) * 14)); line-height: 1.18; margin: 0; }
  .fin-nom b.l { font-size: max(12px, calc(var(--q) * 13)); }
  .fin-nom b.xl { font-size: max(12px, calc(var(--q) * 12)); }
  .fin-info { gap: 4px; margin-top: 0; min-height: 15px; }
  .fin-nb { font-size: 12px; letter-spacing: 0.3px; }
  .fin-rn { gap: 2px; padding: 1px 4px 1px 1px; border-radius: 4px; font-size: 12px; letter-spacing: 0; }
  .fin-mini { width: 13px; height: 13px; }
  /* trois cases sur une ligne : l'icône et le chiffre (la légende s'écrit une fois sous le podium) */
  .fin-stats, .bd-fin[data-stats="ic"] .fin-stats { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 2px; margin-top: calc(var(--q) * 2); padding-top: calc(var(--q) * 2); border-top-width: 1.5px; }
  .fin-st, .bd-fin[data-stats="ic"] .fin-st { grid-template-columns: auto auto; justify-content: center; justify-items: start; gap: 2px; }
  .fin-lb { display: none; }
  .fin-ic { width: calc(var(--q) * 12); height: calc(var(--q) * 12); }
  .fin-st b, .bd-fin[data-stats="ic"] .fin-st b { font-size: max(12px, calc(var(--q) * 13.5)); padding: 0 1px; }
  /* (les cartes étroites, 5 colonnes et plus, et la grande scène : l'icône au-dessus du chiffre) */
  .bd-fin[data-lay="grand"] .fin-stats, .bd-fin[data-n="5"] .fin-stats, .bd-fin[data-n="6"] .fin-stats { gap: 1px 2px; }
  .bd-fin[data-lay="grand"] .fin-st, .bd-fin[data-n="5"] .fin-st, .bd-fin[data-n="6"] .fin-st { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; }
  .bd-fin[data-lay="grand"] .fin-st b, .bd-fin[data-n="5"] .fin-st b, .bd-fin[data-n="6"] .fin-st b { font-size: 12px; word-spacing: 0.06em; }
  .bd-fin[data-lay="grand"] .fin-nom b, .bd-fin[data-n="5"] .fin-nom b, .bd-fin[data-n="6"] .fin-nom b { font-size: max(12px, calc(var(--q) * 13)); }
  .bd-fin[data-lay="grand"] .fin-nom b.l, .bd-fin[data-lay="grand"] .fin-nom b.xl { font-size: 12px; }
  .bd-fin[data-lay="grand"] .fin-carte, .bd-fin[data-n="5"] .fin-carte, .bd-fin[data-n="6"] .fin-carte { padding-left: calc(var(--q) * 5); padding-right: calc(var(--q) * 5); }
  .bd-fin[data-lay="grand"] .fin-pilier, .bd-fin[data-n="5"] .fin-pilier, .bd-fin[data-n="6"] .fin-pilier { margin: 0 calc(var(--q) * 4); }
  .bd-fin[data-lay="grand"] .fin-chap, .bd-fin[data-n="5"] .fin-chap, .bd-fin[data-n="6"] .fin-chap { margin: 0 calc(var(--q) * -4); }
  /* (4 colonnes : des cartes plus larges dans le même fût) */
  .bd-fin[data-lay="cols"][data-n="4"] .fin-pilier { margin: 0 calc(var(--q) * 4); }
  .bd-fin[data-lay="cols"][data-n="4"] .fin-chap { margin: 0 calc(var(--q) * -4); }
  .bd-fin[data-lay="cols"][data-n="4"] .fin-carte { margin-left: 0; margin-right: 0; padding-left: calc(var(--q) * 5); padding-right: calc(var(--q) * 5); }
  .bd-fin[data-lay="cols"][data-n="4"] .fin-ic { width: calc(var(--q) * 11); height: calc(var(--q) * 11); }
  /* la légende des icônes : une fois, au pied du podium, sur le sol */
  .bd-fin:not([data-liste]) .fin-leg, .bd-fin[data-stats="ic"]:not([data-liste]) .fin-leg { position: absolute; z-index: 4; left: 50%; bottom: calc(var(--q) * -4.5); translate: -50% 0; display: flex; align-items: center; gap: calc(var(--q) * 10); margin: 0; padding: 1px 9px 2px; border-radius: 6px; background: rgba(21, 21, 21, 0.88); color: #fff; font: 700 12px/1.2 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
  .fin-leg svg { width: 13px; height: 13px; }
  .fin-leg span { gap: 3px; }
  .fin-intro .fin-leg { animation: finIn 0.4s 1s both; }

  /* l'Elo de chaque joueur : le bandeau d'encre, sans le mot « Elo » (la place manque, l'écart dit tout) */
  .fin-elo { --fs: max(12px, calc(var(--q) * 13)); gap: 4px; margin: calc(var(--q) * 2) calc(var(--q) * -6) 0; padding: 1px 4px 2px; min-height: 0; border-top-width: 2px; border-radius: 0 0 5px 5px; }
  .bd-fin[data-lay="cols"][data-n="4"] .fin-elo { margin-left: calc(var(--q) * -5); margin-right: calc(var(--q) * -5); }
  .fe-lb { display: none; }
  .fe-d { padding: 0 3px 1px; border-width: 1.5px; border-radius: 3px; }
  .fe-t { font-size: 1em; letter-spacing: 0; }
  .fin-poids { padding: 0 3px 1px; font-size: 1em; }

  /* la liste : une colonne qui défile, calée par fin.js (calerListe) sur un nombre ENTIER de lignes (--rh, --hh) et qui
     s'arrête toujours sur une ligne entière ; TA ligne épinglée en bas (ou en haut) ; une barre à droite. Peu de lignes :
     le cadre se cale sur son contenu. */
  .fin-liste { --lgap: 2px; flex: 1 1 auto; align-self: center; max-width: calc(var(--q) * 390); max-height: 100%; padding: 0 calc(var(--q) * 5); border-width: 2px; border-radius: 9px; box-shadow: 3px 3px 0 var(--ink); overflow: hidden; }
  .fin-li-tete { display: none; }
  .fin-legende { flex: none; flex-wrap: nowrap; gap: 8px; margin: 0 calc(var(--q) * -5); padding: 3px 4px 4px; border-top: 1.5px solid rgba(21, 21, 21, 0.12); background: var(--card); font-size: 12px; letter-spacing: 0; }
  .fin-legende span { gap: 2px; }
  .fin-legende svg { width: 13px; height: 13px; }
  .fin-li-ol { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--lgap); padding: 0; }
  .fin-li-ol::-webkit-scrollbar { display: none; }
  .fin-liste[data-defile] .fin-li-ol { flex: 1 1 auto; scroll-snap-type: y mandatory; scroll-padding-top: calc(var(--hh, 0px) + 2px); }
  .fin-liste[data-defile] .fin-li:not(.fin-li-h) { height: var(--rh); min-height: 0; }
  .fin-liste[data-defile] .fin-li:not(.fin-li-h):not(.moi) { scroll-snap-align: start; }
  .fin-liste[data-defile] .fin-li-barre { display: block; position: absolute; z-index: 3; right: 1px; top: calc(var(--hh, 0px) + 3px); bottom: calc(var(--lg, 0px) + 3px); width: 3px; border-radius: 2px; background: rgba(21, 21, 21, 0.1); pointer-events: none; }
  .fin-li-barre > i { display: block; width: 100%; border-radius: 2px; background: rgba(21, 21, 21, 0.5); }
  .fin-li { grid-template-columns: calc(var(--q) * 27) calc(var(--q) * 22) minmax(0, 1fr) repeat(3, calc(var(--q) * 37)); column-gap: calc(var(--q) * 4); min-height: calc(var(--q) * 24); padding: 1px calc(var(--q) * 4); border-radius: 5px; }
  .fin-li.g-deb::before, .fin-li.g-mid::before, .fin-li.g-fin::before { left: 1px; width: 3px; }
  .fin-li-h { position: sticky; top: 0; z-index: 2; min-height: calc(var(--q) * 22); margin: 0 calc(var(--q) * -5); padding: 0 calc(var(--q) * 9); border-radius: 0; background: var(--card); border-bottom: 1.5px solid rgba(21, 21, 21, 0.12); }
  .fin-li-h.suite { display: none; }
  .fin-li-ht { font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
  .fin-li-ht .pc { display: none; }
  .fin-li-ht .tel { display: inline; }
  .fin-li-h .fin-ic { width: 14px; height: 14px; }
  .fin-li.moi { position: sticky; top: calc(var(--hh, 22px) + 2px); bottom: 0; z-index: 1; box-shadow: inset 0 0 0 2px var(--ink); }
  .fin-li-pl { font-size: max(12px, calc(var(--q) * 13)); }
  .fin-li-b img, .fin-li-b .fin-sans { width: calc(var(--q) * 19); height: calc(var(--q) * 19); border-width: 1.5px; font-size: 10px; }
  .fin-li-n { column-gap: 4px; }
  .fin-li-n b { font-size: max(12px, calc(var(--q) * 13)); }
  .fin-li .fin-toi { display: none; }
  .fin-liste[data-cols="2"] .fin-li-n small { display: block; }
  .fin-li-n .fin-tag { font-size: 12px; padding: 0 4px 1px; border-width: 1.5px; border-radius: 4px; }
  .fin-li-n small { font-size: 12px; }
  .fin-li-s b { font-size: max(12px, calc(var(--q) * 13)); padding: 0 2px; }
  .bd-fin[data-lay="grand"] .fin-scene { justify-content: space-between; gap: calc(var(--q) * 10); }
  .bd-fin[data-lay="grand"] .fin-podium { gap: calc(var(--q) * 4); }
  .bd-fin[data-lay="grand"] .fin-camp { gap: calc(var(--q) * 4); }
  .bd-fin[data-lay="grand"] .fin-podium::after { left: calc(var(--q) * -6); right: calc(var(--q) * -6); }

  /* EN BAS : le bandeau à gauche, l'état et les boutons à droite */
  .fin-bas { column-gap: calc(var(--q) * 8); row-gap: calc(var(--q) * 3); margin-top: calc(var(--q) * 3); }
  .fin-etat { height: calc(2.4em + 4px); font-size: 12px; line-height: 1.2; }
  .fin-etat-t { padding: 1px 7px 2px; border-radius: 6px; }
  .fin-bilan { gap: calc(var(--q) * 7); padding: calc(var(--q) * 4) calc(var(--q) * 9) calc(var(--q) * 4) calc(var(--q) * 8); border-width: 2.5px; border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); }
  .fin-bilan::before { width: calc(var(--q) * 4); border-radius: 8px 0 0 8px; }
  .fb-emb { width: calc(var(--q) * 36); height: calc(var(--q) * 36); }
  .fb-emb > .fin-emb { filter: drop-shadow(2px 2px 0 var(--ink)); }
  .fb-corps { gap: calc(var(--q) * 2); }
  .fb-l1 { display: none; }
  .fb-l2 { gap: calc(var(--q) * 6); }
  .fb-nom { font-size: max(14px, calc(var(--q) * 15)); text-shadow: 2px 2px 0 var(--ink); }
  .fb-chif { font-size: max(12px, calc(var(--q) * 13.5)); }
  .fb-delta { padding: 0 5px 1px; border-width: 2px; border-radius: 5px; box-shadow: 2px 2px 0 var(--ink); font-size: max(13px, calc(var(--q) * 14)); }
  .fin-bilan .fin-poids { font-size: 12px; padding: 1px 4px; }
  .fb-record, .fb-xp, .fb-compte { padding: 1px 5px 2px; border-width: 1.5px; border-radius: 5px; font-size: 12px; }
  .fb-l4 { min-height: 14px; font-size: 12px; line-height: 1.15; gap: 6px; }
  .fb-encore { font-size: 12px; letter-spacing: 0.3px; }
  .fb-evt { padding: 1px 5px 2px; border-radius: 5px; font-size: 12px; }
  .fb-lg { display: none; } .fb-ct { display: inline; }
  .fb-evt svg { width: 12px; height: 12px; }
  .fin-bilan.att .fb-nom { font-size: max(13px, calc(var(--q) * 15)); }
  .fb-piece { border-width: 2.5px; box-shadow: 2px 2px 0 var(--ink); }
  .fb-piece b { font-size: max(13px, calc(var(--q) * 14)); }
  /* la piste au téléphone : le nom des rangs au-dessus, les divisions dans les cases, pas de seuils (la place manque :
     « Encore… » les dit), le but au bout */
  .fp { --bh: calc(var(--q) * 13); grid-template-rows: 13px var(--bh) 0; column-gap: calc(var(--q) * 6); row-gap: 2px; }
  .fp-rg { gap: 2px; padding: 0 2px; font-size: 12px; letter-spacing: 0.3px; }
  .fp-rg::after { left: 2px; right: 2px; height: 2px; }
  .fp-rg .fin-mini { width: 12px; height: 12px; }
  .fp-rg.s1 .fin-mini { display: none; }
  .fp-barre { gap: 2px; }
  .fp-seg { border-width: 1.5px; border-radius: 4px; }
  .fp-div { font-size: 12px; letter-spacing: 0; }
  .fp-gain { top: 2px; bottom: 2px; }
  .fp-repere { top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; box-shadow: 0 0 0 1px var(--ink); }
  .fp-moi { width: calc(var(--bh) + 6px); height: calc(var(--bh) + 6px); border-width: 1.5px; box-shadow: 0 0 0 1.5px #fff, 1px 1px 0 1.5px var(--ink); }
  .fp-seuils { display: none; }
  .fp-but { width: auto; gap: 0; }
  .fp-but > .fin-emb, .fp-but.sommet svg { width: calc(var(--q) * 26); height: calc(var(--q) * 26); }
  .fp-but-n { display: none; }
  .fp-niv { width: calc(var(--q) * 24); height: calc(var(--q) * 24); border-width: 2px; font-size: 13px; }
  .fpl { gap: 2px; height: calc(var(--q) * 16); }
  .fpl-c { border-width: 1.5px; border-radius: 4px; font-size: 12px; }
  .fb-eq { padding: 1px 6px 2px; border-width: 2px; border-radius: 5px; box-shadow: 2px 2px 0 var(--ink); font-size: max(12px, calc(var(--q) * 13)); }
  .fb-score { gap: 4px; font-size: max(14px, calc(var(--q) * 17)); text-shadow: 2px 2px 0 var(--ink); }
  .fb-sc-lb, .fb-info { font-size: 12px; letter-spacing: 0.5px; }
  .fb-info { padding: 1px 6px 2px; border-radius: 5px; }
  .fb-mvp { display: none; }

  .fin-btns { gap: calc(var(--q) * 7); }
  .fin-b { gap: 1px; padding: calc(var(--q) * 4) calc(var(--q) * 10) calc(var(--q) * 5); border-width: 2.5px; border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); }
  .fin-b:hover:not(:disabled) { transform: none; box-shadow: 3px 3px 0 var(--ink); }
  .fin-b:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
  .fin-b b { font-size: max(15px, calc(var(--q) * 18)); }
  .fin-salon { min-width: calc(var(--q) * 74); }
  .fin-salon-s { font-size: 12px; letter-spacing: 0.3px; }
  .fin-emo { padding: calc(var(--q) * 4) calc(var(--q) * 6); }
  .fin-emo svg { width: calc(var(--q) * 22); height: calc(var(--q) * 22); }
  .fin-rev { width: calc(var(--q) * 136); padding-left: calc(var(--q) * 7); padding-right: calc(var(--q) * 7); }
  .fin-rev .fin-rev-t { font-size: max(16px, calc(var(--q) * 19)); }
  .fin-rev-s { font-size: 12px; letter-spacing: 0.3px; }
  .fin-rev.off, .fin-rev.gris { box-shadow: 2px 2px 0 var(--ink); }
  .fin-rev.accord { outline-width: 2px; outline-offset: -5px; box-shadow: 2px 2px 0 var(--ink); }
  .fin-temps { left: 8px; right: 8px; bottom: 3px; height: 3px; }
  @keyframes finHalo { from { box-shadow: 3px 3px 0 var(--ink), 0 0 0 0 rgba(255, 255, 255, 0.95); } to { box-shadow: 3px 3px 0 var(--ink), 0 0 0 10px rgba(255, 255, 255, 0); } }
  @keyframes finPulse { 50% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 5px rgba(255, 210, 63, 0.8); } }

  .fin-bulle { max-width: calc(100vw - 32px); gap: 4px 10px; padding: 5px 8px; border-width: 2px; border-radius: 7px; box-shadow: 3px 3px 0 var(--ink); font-size: 12px; }
  .fin-bulle svg { width: 14px; height: 14px; }

  /* « Nouvel objet ! » */
  .fin-notif { top: 42%; width: min(calc(var(--q) * 360), calc(100vw - 32px)); padding-bottom: calc(var(--q) * 8); border-width: 2.5px; border-radius: 11px; box-shadow: 4px 4px 0 var(--ink), 0 0 0 100vmax rgba(10, 6, 26, 0.45); }
  .fn-tete { padding: 4px 10px 5px; border-bottom-width: 2.5px; font-size: max(15px, calc(var(--q) * 17)); }
  .fn-tete small { font-size: 12px; }
  .fn-corps { gap: calc(var(--q) * 10); padding: calc(var(--q) * 8) calc(var(--q) * 12) calc(var(--q) * 7); }
  .fn-vue { width: calc(var(--q) * 64); height: calc(var(--q) * 64); border-radius: 8px; box-shadow: inset 0 0 0 2px var(--ink); }
  .fn-txt { gap: 2px; }
  .fn-nom { font-size: max(15px, calc(var(--q) * 17)); }
  .fn-desc, .fn-ou { font-size: 12px; }
  .fn-btns { gap: calc(var(--q) * 8); padding: 0 calc(var(--q) * 12); }
  .fn-btns button { gap: 6px; padding: 4px 14px 5px; border-width: 2.5px; border-radius: 9px; box-shadow: 3px 3px 0 var(--ink); font-size: max(15px, calc(var(--q) * 16)); }
  .fin-ap-carte { border-width: 2px; box-shadow: 0 0 0 1.5px var(--ink), inset 0 0 0 1.5px var(--ink); border-radius: 4px; }

  /* LA MONTÉE au téléphone : sur deux colonnes, l'emblème à gauche, le reste à droite (la hauteur manque pour tout
     empiler) */
  .fin-montee { padding: calc(var(--q) * 8 + var(--f-t)) calc(var(--q) * 16 + var(--f-r)) calc(var(--q) * 26 + var(--f-b)) calc(var(--q) * 16 + var(--f-l)); }
  .fm-centre { display: grid; grid-template-columns: auto minmax(0, auto); grid-template-areas: "embs sur" "embs noms" "embs fmt" "embs bas" "embs reco"; align-items: center; justify-items: start; align-content: center; column-gap: calc(var(--q) * 20); row-gap: calc(var(--q) * 4); text-align: left; }
  .fm-sur { grid-area: sur; margin: 0; }
  .fm-sur > span { justify-self: start; padding: 2px 9px 3px; border-width: 2px; border-radius: 7px; font-size: max(13px, calc(var(--q) * 14)); letter-spacing: 1.5px; }
  .fm-sur .a { font-size: 12px; letter-spacing: 1px; }
  .fm-embs, .fin-montee.a-reco .fm-embs { grid-area: embs; width: calc(var(--q) * 150); }
  .fm-entier .fin-emb, .fm-ec .fin-emb, .fm-nouveau .fin-emb { filter: drop-shadow(3px 4px 0 var(--ink)); }
  .fm-noms { grid-area: noms; margin: 0; justify-items: start; }
  .fm-nom { justify-self: start; font-size: calc(var(--q) * 36); text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 3px 0 var(--ink); }
  .fin-montee[data-k="hatred"] .fm-nom.b { text-shadow: -3px 0 var(--cyan), 3px 0 var(--sang), 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); }
  .fm-fmt { grid-area: fmt; margin: 0; padding: 2px 8px 3px; font-size: 12px; letter-spacing: 1px; }
  .fm-bas { grid-area: bas; gap: calc(var(--q) * 10); margin: calc(var(--q) * 2) 0 0; padding: calc(var(--q) * 5) calc(var(--q) * 10) calc(var(--q) * 5) calc(var(--q) * 7); border-width: 2px; border-radius: 9px; box-shadow: 2px 2px 0 var(--ink); }
  .fm-balle { width: calc(var(--q) * 30); height: calc(var(--q) * 30); }
  .fm-balle-i { border-width: 2px; }
  .fm-prog { gap: 3px; min-width: calc(var(--q) * 250); }
  .fm-elo { gap: 5px; font-size: max(13px, calc(var(--q) * 14)); }
  .fm-delta { padding: 0 5px 1px; border-width: 2px; border-radius: 5px; box-shadow: 2px 2px 0 var(--ink); font-size: max(13px, calc(var(--q) * 14)); }
  .fm-reco { grid-area: reco; gap: calc(var(--q) * 8); margin: calc(var(--q) * 3) 0 0; }
  .fm-reco-t { display: none; }
  .fm-reco-l { gap: calc(var(--q) * 10); }
  .fm-obj { gap: 5px; padding: 3px 9px 3px 3px; border-width: 2px; border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); }
  .fm-obj > .fin-ap { width: calc(var(--q) * 32); height: calc(var(--q) * 32); border-radius: 5px; }
  .fm-obj-n { font-size: 12px; }
  .fm-obj-new { right: -6px; padding: 0 4px 1px; border-width: 1.5px; border-radius: 4px; font-size: 12px; }
  .fm-suite { bottom: calc(var(--q) * 6 + var(--f-b)); }
  .fm-suite span { padding: 2px 9px 3px; border-radius: 6px; font-size: 12px; letter-spacing: 1px; }
}

/* ─── moins d'animations : tout d'un coup, en fondu ─── */
@media (prefers-reduced-motion: reduce) {
  .fin-rayons, .fm-rayons, .fin-confettis i, .fin-rev.pulse, .fin-salon.halo, .fin-h .fin-n.bat { animation: none !important; }
  .fin-confettis { display: none; }
}
.fin-calme .fin-col, .fin-calme .fin-haut, .fin-calme .fin-h, .fin-calme .fin-bilan, .fin-calme .fin-liste { animation: finIn 0.4s ease-out both !important; }
/* (la montée, en « moins d'animations » : directement le nouveau rang, en fondu ; fin.js pose .casse et .neuf d'un coup) */
.fin-calme .fm-ancien, .fin-calme .fm-nom.a, .fin-calme .fm-sur .a, .fin-calme .fm-flash { display: none; }
.fin-calme .fm-fond { clip-path: none; animation: none !important; }
.fin-calme .fm-nouveau, .fin-calme .fm-nom.b, .fin-calme .fm-sur .b, .fin-calme .fm-fmt, .fin-calme .fm-suite, .fin-calme .fm-bas, .fin-calme .fm-delta, .fin-calme .fm-tache, .fin-calme .fm-embs, .fin-calme .fm-reco, .fin-calme .fm-obj { animation: finIn 0.4s ease-out both !important; opacity: 1; transform: none; }
/* (l'état final d'un coup, sans le déroulé : un appui pour passer, ou les captures) */
.bd-fin.fin-fige .fin-bilan, .bd-fin.fin-fige .fin-bilan * { animation: none !important; }