/* ═══════════════ « PARTIE TROUVÉE ! » ET L'ÉCRAN VS (js/br/vs.js) ═══════════════
   Max : « dès que les joueurs sont trouvés, un son pour annoncer que ça va commencer, et le compteur : début de la partie
   dans 3, 2, 1, puis un écran de chargement où on voit le VS des 2 côtés […] le rang autour de la balle ». Référence :
   la carte VS de Brawlhalla (conception-ranked/references-max/4-carte-vs-valhallan.webp) : le CADRE de la carte est le
   rang, de plus en plus riche. Dans la patte de BallDash : gros traits d'encre, ombres décalées sans flou, capitales
   italiques, l'or pour ce qui compte.
   Deux mises en page, les mêmes mots et le même ordre :
     • LARGE (ordinateur) : tout en --u (10 px à 1 920 × 1 080, suit la plus petite des deux dimensions) ;
     • COMPACTE (téléphone en paysage, et toute fenêtre de 520 px de haut ou moins) : des pixels, aucun texte sous 12 px,
       les encoches respectées (--sa-*).
   LA TAILLE DES CARTES se calcule d'après l'écran (--W : la largeur que laisse la rangée, bornée ; --R : la hauteur
   d'une carte pour une largeur de 1, crête comprise) : une carte prend toute la place qu'elle peut, la balle avec.
   Une CARTE se dessine par rapport à sa propre taille (container queries : --k vaut 1 % de sa largeur, ou moins si elle
   est basse) : la même carte sert au 1 VS 1 et au 2 VS 2, au PC et au téléphone, et ailleurs (BR_ECRANS.carte).
   On n'anime que transform et opacity ; une seule animation continue (l'aura du sommet) ; « moins d'animations » :
   des fondus (.bdx-calme, posé par le script d'après prefers-reduced-motion). */

:root {
  /* (les marges des encoches, comme css/hub.css ; les captures les simulent en les fixant sur <html>) */
  --sa-l: env(safe-area-inset-left, 0px); --sa-r: env(safe-area-inset-right, 0px);
  --sa-t: env(safe-area-inset-top, 0px); --sa-b: env(safe-area-inset-bottom, 0px);
}
.bdvs, .bdx-pt, .bdx-volet, .bdvs-hote {
  --u: min(0.521vw, 0.926vh);
  --bx-ink: var(--ink, #151515); --bx-or: var(--gold, #FFD23F); --bx-carte: var(--card, #FBFAF7);
  --bx-fc: var(--fc, 'Barlow Condensed', 'Arial Narrow', sans-serif); --bx-fb: var(--fb, 'Barlow', 'Segoe UI', Arial, sans-serif);
  --bx-out: 2px 2px 0 var(--bx-ink), -1.5px -1.5px 0 var(--bx-ink), 1.5px -1.5px 0 var(--bx-ink), -1.5px 1.5px 0 var(--bx-ink), 0 2px 0 var(--bx-ink), 2px 0 0 var(--bx-ink), -2px 0 0 var(--bx-ink);
  /* les deux camps : toi en bleu (à gauche), l'adversaire en rouge (à droite) — les couleurs de la recherche de partie */
  --b1: #8FE3FF; --b2: #2D6BFF; --b3: #0B205E;
  --r1: #FFB08A; --r2: #D8352A; --r3: #5E0F0B;
  /* la file : rouge pour Ranked, vert pour Standard, bleu pour les parties perso, violet pour la battle royale (hub.css) */
  --fc-c: #E5484D;
  box-sizing: border-box;
}
.bdvs *, .bdx-pt *, .bdx-volet *, .bdvs-hote * { box-sizing: border-box; }
.bdvs[data-file="std"], .bdx-pt[data-file="std"] { --fc-c: #1FB873; }
.bdvs[data-file="pp"], .bdx-pt[data-file="pp"] { --fc-c: #2D8CFF; }
.bdvs[data-file="br"], .bdx-pt[data-file="br"] { --fc-c: #8E44E8; }
.bdvs[hidden], .bdx-pt[hidden] { display: none; }

/* ─── le titre : la file en couleur, puis le format et la carte (« RANKED · 1 VS 1 · JARDIN ») ─── */
.bdx-pil { position: relative; z-index: 3; margin: 0; display: inline-flex; align-items: stretch; max-width: 100%; overflow: hidden; flex: none;
  border: calc(var(--u) * 0.45) solid var(--bx-ink); border-radius: calc(var(--u) * 1.3); background: var(--bx-carte); color: var(--bx-ink);
  box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--bx-ink); font: italic 800 max(12px, calc(var(--u) * 3))/1 var(--bx-fc); text-transform: uppercase; white-space: nowrap; }
.bdx-pil-f { display: flex; align-items: center; padding: calc(var(--u) * 0.7) calc(var(--u) * 1.6) calc(var(--u) * 0.9); background: var(--fc-c); color: #fff; text-shadow: var(--bx-out); border-right: calc(var(--u) * 0.45) solid var(--bx-ink); font-weight: 800; }
.bdx-pil-r { display: flex; align-items: center; padding: calc(var(--u) * 0.7) calc(var(--u) * 1.8) calc(var(--u) * 0.9) calc(var(--u) * 1.4); letter-spacing: 0.02em; }

/* ═══════════════ 1. « PARTIE TROUVÉE ! » (par-dessus la carte d'attente, qui continue dessous) ═══════════════ */
.bdx-pt { position: fixed; inset: 0; z-index: 46; overflow: hidden; pointer-events: none; color: #fff; font-family: var(--bx-fb);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto minmax(0, 1.25fr); justify-items: center; row-gap: calc(var(--u) * 2.2);
  padding: calc(var(--u) * 2.4 + var(--sa-t)) calc(var(--u) * 3 + var(--sa-r)) calc(var(--u) * 2.4 + var(--sa-b)) calc(var(--u) * 3 + var(--sa-l)); }
/* (la carte se fige : nettement assombrie et désaturée, comme le prévoit la conception §3.2 ; le compteur est seul à lire) */
.bdx-pt-voile { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 75% 65% at 50% 55%, rgba(12, 10, 30, 0.6), rgba(12, 10, 30, 0.88));
  -webkit-backdrop-filter: grayscale(0.9) brightness(0.62); backdrop-filter: grayscale(0.9) brightness(0.62); animation: bdxFondu 0.3s ease-out both; }
.bdx-pt-mode { grid-row: 1; animation: bdxDescend 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
/* le bandeau en travers, aux couleurs de la file, et « PARTIE TROUVÉE ! » en or */
.bdx-pt-bande { grid-row: 3; position: relative; z-index: 1; width: 130vw; display: grid; place-items: center; padding: calc(var(--u) * 2) 0 calc(var(--u) * 2.4);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 calc(var(--u) * 1.2), rgba(255, 255, 255, 0) calc(var(--u) * 1.2) calc(var(--u) * 2.4)), var(--fc-c);
  border-top: calc(var(--u) * 0.7) solid var(--bx-ink); border-bottom: calc(var(--u) * 0.7) solid var(--bx-ink); transform: rotate(-3deg);
  box-shadow: 0 calc(var(--u) * 1) 0 rgba(21, 21, 21, 0.45); animation: bdxBande 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.bdx-pt-bande b { display: block; font: italic 800 calc(var(--u) * 10)/0.95 var(--bx-fc); text-transform: uppercase; letter-spacing: 0.02em; color: var(--bx-or); white-space: nowrap; padding: 0 0.1em 0.06em 0;
  text-shadow: 3px 3px 0 var(--bx-ink), -2px -2px 0 var(--bx-ink), 2px -2px 0 var(--bx-ink), -2px 2px 0 var(--bx-ink), 0 3px 0 var(--bx-ink), 3px 0 0 var(--bx-ink), -3px 0 0 var(--bx-ink), calc(var(--u) * 0.7) calc(var(--u) * 0.9) 0 var(--bx-ink);
  animation: bdxRebond 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both 0.05s; }
/* « Début de la partie dans », puis le chiffre dans son médaillon : un disque d'encre cerclé de blanc et de la couleur de
   la file, qui isole le chiffre de ce qui bouge dessous (ta balle, son badge de vie). Max (capture du PC) : l'étiquette
   en boîte, plus large que le médaillon et posée à cheval sur l'anneau, « dépassait ». C'est maintenant une légende
   détourée d'encre, sans boîte, AU-DESSUS du médaillon et détachée de l'anneau ; au PC, pas plus large que lui (25 u
   pour 26 u) ; au téléphone, où 12 px de texte ne tiennent pas dans 84 à 116 px, elle le déborde un peu, librement. */
.bdx-pt-cpt { grid-row: 4; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.3); animation: bdxFondu 0.3s ease-out both 0.2s; }
.bdx-pt-dans { position: relative; z-index: 2; display: block; margin: 0; padding: 0 0.12em 0.06em 0; color: #fff;
  font: italic 800 max(14px, calc(var(--u) * 2.4))/1 var(--bx-fc); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
  text-shadow: var(--bx-out), 3px 3px 0 var(--bx-ink); }
.bdx-pt-med { position: relative; width: calc(var(--u) * 26); aspect-ratio: 1; display: grid; place-items: center; }
.bdx-pt-med.pop { animation: bdxMed 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
.bdx-pt-anneau { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(calc(var(--u) * 0.7) calc(var(--u) * 0.7) 0 var(--bx-ink)); }
.bdx-pt-anneau circle:first-child { fill: var(--fc-c); stroke: var(--bx-ink); stroke-width: 3.5; }
.bdx-pt-anneau .w { fill: #131119; stroke: var(--bx-ink); stroke-width: 3.5; }
.bdx-pt-anneau .c { fill: none; stroke: #fff; stroke-width: 2.4; }
.bdx-pt-n { position: relative; display: block; text-align: center; font: italic 800 calc(var(--u) * 16)/0.86 var(--bx-fc); color: #fff; padding: 0 0.06em 0.04em 0; margin-top: 0.04em;
  text-shadow: 4px 4px 0 var(--bx-ink), -3px -3px 0 var(--bx-ink), 3px -3px 0 var(--bx-ink), -3px 3px 0 var(--bx-ink), 0 4px 0 var(--bx-ink), 4px 0 0 var(--bx-ink), -4px 0 0 var(--bx-ink); }
.bdx-pt-n.pop { animation: bdxPop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1); }
/* la règle « défi » (3 victoires d'affilée) : une petite flamme */
.bdx-pt-defi { grid-row: 5; position: relative; z-index: 1; margin: 0; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.6) calc(var(--u) * 1.6) calc(var(--u) * 0.7) calc(var(--u) * 1);
  border: calc(var(--u) * 0.35) solid var(--bx-ink); border-radius: calc(var(--u) * 1.2); background: #FF8A1F; color: var(--bx-ink); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--bx-ink);
  font: italic 800 max(13px, calc(var(--u) * 2.4))/1 var(--bx-fc); text-transform: uppercase; white-space: nowrap; animation: bdxFondu 0.3s ease-out both 0.35s; }
.bdx-flamme { width: 1.25em; height: 1.25em; flex: none; }

/* ─── le volet en diagonale : bleu à gauche, rouge à droite. Les deux panneaux sont exactement complémentaires (55 % en
   haut, 45 % en bas) : aucun recouvrement, donc aucune rayure doublée le long de la couture ─── */
.bdx-volet { position: fixed; inset: 0; z-index: 47; pointer-events: none; }
.bdx-volet-l, .bdx-volet-r { position: absolute; inset: 0; transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1); }
.bdx-volet-l { clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%); transform: translateX(-102%);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 calc(var(--u) * 1.4), rgba(255, 255, 255, 0) calc(var(--u) * 1.4) calc(var(--u) * 2.8)), radial-gradient(circle at 25% 50%, var(--b1) 0, var(--b2) 45%, var(--b3) 100%); }
.bdx-volet-r { clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%); transform: translateX(102%);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 calc(var(--u) * 1.4), rgba(255, 255, 255, 0) calc(var(--u) * 1.4) calc(var(--u) * 2.8)), radial-gradient(circle at 75% 50%, var(--r1) 0, var(--r2) 45%, var(--r3) 100%); }
.bdx-volet-s { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.12s linear; }
.bdx-volet-s path, .bdvs-couture path { fill: none; vector-effect: non-scaling-stroke; }
.bdx-volet-s path:first-child, .bdvs-couture .o { stroke: var(--bx-ink); stroke-width: max(8px, calc(var(--u) * 1.6)); }
.bdx-volet-s path + path, .bdvs-couture .w { stroke: #fff; stroke-width: max(2px, calc(var(--u) * 0.45)); }
.bdvs-couture .h { display: none; }
.bdx-volet.ferme .bdx-volet-l, .bdx-volet.ferme .bdx-volet-r { transform: none; }
.bdx-volet.ferme .bdx-volet-s { opacity: 1; transition-delay: 0.18s; }
.bdx-volet.ouvre .bdx-volet-s { opacity: 0; transition-delay: 0s; }

/* ═══════════════ 2. L'ÉCRAN VS ═══════════════ */
.bdvs {
  /* la rangée : n cartes par camp, le centre (--mid), les écarts ; --W la largeur d'une carte, --R sa hauteur au plus
     (crête comprise) pour une largeur de 1 ; --sh la hauteur de la scène qui en découle (le groupe titre-cartes-barre se
     centre : pas trois îlots séparés par du vide). --Rk : la proportion de référence d'une carte, qui règle son échelle
     (--k) ; au téléphone, --R est plus grand : la carte prend toute la hauteur libre, et la balle avec. --marge : la place
     de la crête au-dessus de la carte, en k. --ob : la place réservée SOUS les cartes pour l'ornement du bas, qui
     dépasse de 5,5 k (k ≤ --W / 100) : il ne touche jamais la barre ni l'astuce. */
  --n: 1; --wmax: calc(var(--u) * 54); --mid: calc(var(--u) * 30); --gc: calc(var(--u) * 3); --gap: calc(var(--u) * 2); --R: 1.46; --Rk: 1.46; --marge: 16;
  --padx: calc(var(--u) * 6 + var(--sa-l) + var(--sa-r));
  --W: min(var(--wmax), (100vw - var(--padx) - var(--mid) - 2 * var(--gc) - 2 * (var(--n) - 1) * var(--gap)) / (2 * var(--n)));
  --ob: calc(var(--W) * 0.06);
  --sh: calc(var(--W) * var(--R) + var(--p2) + var(--n2) + var(--ob)); --p2: 0px; --n2: 0px;
  position: fixed; inset: 0; z-index: 46; overflow: hidden; color: #fff; font-family: var(--bx-fb); -webkit-user-select: none; user-select: none;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, var(--sh)) auto; align-content: center; row-gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 2.4 + var(--sa-t)) calc(var(--u) * 3 + var(--sa-r)) calc(var(--u) * 2.2 + var(--sa-b)) calc(var(--u) * 3 + var(--sa-l)); }
/* (2 VS 2 : au moins 60 px de marge de chaque côté à 1 366 comme à 1 920 — 8 u —, un centre plus serré : quatre
   cartes et le centre forment un bloc posé dans l'écran, pas collé à ses bords) */
.bdvs[data-fmt="2"] { --n: 2; --wmax: calc(var(--u) * 40); --mid: calc(var(--u) * 22); --gc: calc(var(--u) * 2); --gap: calc(var(--u) * 2); --R: 1.52;
  --padx: calc(var(--u) * 17 + var(--sa-l) + var(--sa-r)); }
.bdvs.p2l { --p2: calc(var(--W) * 0.1); }
.bdvs.n2l { --n2: calc(var(--W) * 0.06); }
/* (en 2 VS 2, les cartes sont plus étroites : le ruban et le nom de la balle y prennent plus de place, comme au téléphone) */
.bdvs[data-fmt="2"] .bdvs-carte { --fn: max(12px, calc(var(--k) * 6.4)); --fr: max(12px, calc(var(--k) * 7.4)); }
/* le fond : deux moitiés dans leurs « portes » (la sortie les écarte), leurs rayons (fixes), le motif rayé du jeu, et la
   couture en diagonale (dans la porte de gauche : elle part avec elle) */
.bdvs-bg { position: absolute; inset: 0; z-index: 0; }
.bdvs-porte { position: absolute; inset: 0; }
.bdvs-moitie { position: absolute; inset: 0; }
.bdvs-moitie.l { clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 calc(var(--u) * 1.4), rgba(255, 255, 255, 0) calc(var(--u) * 1.4) calc(var(--u) * 2.8)),
    repeating-conic-gradient(from 0deg at 26% 50%, rgba(255, 255, 255, 0.08) 0 6deg, rgba(255, 255, 255, 0) 6deg 12deg),
    radial-gradient(circle at 26% 50%, var(--b1) 0, var(--b2) 42%, var(--b3) 100%); }
.bdvs-moitie.r { clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 calc(var(--u) * 1.4), rgba(255, 255, 255, 0) calc(var(--u) * 1.4) calc(var(--u) * 2.8)),
    repeating-conic-gradient(from 0deg at 74% 50%, rgba(255, 255, 255, 0.08) 0 6deg, rgba(255, 255, 255, 0) 6deg 12deg),
    radial-gradient(circle at 74% 50%, var(--r1) 0, var(--r2) 42%, var(--r3) 100%); }
.bdvs-couture { position: absolute; inset: 0; width: 100%; height: 100%; }

/* le haut : le titre, et pendant une revanche la série en or */
.bdvs-haut { grid-row: 1; position: relative; z-index: 3; min-width: 0; display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 1.6); flex-wrap: wrap; }
.bdvs-serie { margin: 0; flex: none; display: inline-flex; align-items: baseline; gap: calc(var(--u) * 1); padding: calc(var(--u) * 0.7) calc(var(--u) * 1.8) calc(var(--u) * 0.9);
  border: calc(var(--u) * 0.45) solid var(--bx-ink); border-radius: calc(var(--u) * 1.3); background: var(--bx-or); color: var(--bx-ink); box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--bx-ink);
  transform: rotate(-2deg); white-space: nowrap; text-transform: uppercase; }
.bdvs-serie span { font: 700 max(12px, calc(var(--u) * 2.1))/1 var(--bx-fc); letter-spacing: 0.1em; }
.bdvs-serie b { font: italic 800 max(14px, calc(var(--u) * 3))/1 var(--bx-fc); font-variant-numeric: tabular-nums; }

/* la scène : ton camp | le centre | les adversaires (des largeurs exactes : la rangée se centre d'elle-même) */
.bdvs-scene { grid-row: 2; position: relative; z-index: 1; min-height: 0; display: flex; justify-content: center; align-items: stretch; gap: var(--gc); padding-bottom: var(--ob); }
.bdvs-camp { flex: none; min-width: 0; display: flex; align-items: stretch; gap: var(--gap); }
.bdvs-slot { position: relative; z-index: 1; container-type: size; flex: none; width: var(--W); min-width: 0; }
/* (les cartes à halo — le démon, l'aura — passent SOUS leurs voisines : leur lueur ne mord jamais sur une autre carte) */
.bdvs-slot:has(> .bdvs-carte[data-t="demon"]), .bdvs-slot:has(> .bdvs-carte[data-t="aura"]) { z-index: 0; }

/* ─── LA CARTE : son emplacement réserve en haut la place de la crête (16 k) ; la carte, son liseré (le rang) ; dedans,
   le panneau aux couleurs du camp ─── */
.bdvs-carte {
  --k: min(1cqw, 1cqh / var(--Rk, 1.46));
  --ep: max(2.5px, calc(var(--k) * 0.9));          /* le trait d'encre du tour */
  --bw: calc(var(--k) * 1.8);                       /* la largeur du liseré (de plus en plus large de rang en rang) */
  --cw: calc(var(--k) * 20);                        /* la largeur de la crête */
  --band: #6B7383;
  --fond: radial-gradient(circle at 50% 44%, #3A78FF 0, #1B3A9E 50%, #0B173F 100%);
  --fp: max(14px, calc(var(--k) * 10));             /* le pseudo */
  --fn: max(12px, calc(var(--k) * 5.6));            /* le nom de la balle */
  --fr: max(12px, calc(var(--k) * 6.4));            /* le ruban */
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--k) * var(--marge, 16)); margin: 0;
}
.bdvs-carte[data-cote="r"] { --fond: radial-gradient(circle at 50% 44%, #F2564A 0, #A2202C 50%, #3A0910 100%); }
/* (un rembourrage FIXE, calé sur le liseré le plus large — l'aura, 3,8 k : le liseré s'élargit de rang en rang sans
   jamais pousser le contenu. D'une carte à l'autre de la rangée, la balle a la même taille, le ruban et le nom de la balle
   sont à la même hauteur, au pixel près) */
.bdvs-k { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--k) * var(--pt, 9.5)) calc(var(--k) * 6.4) calc(var(--k) * 7.2);
  border: var(--ep) solid var(--bx-ink); border-radius: calc(var(--k) * 5); background: var(--band); box-shadow: calc(var(--k) * 1.8) calc(var(--k) * 1.8) 0 var(--bx-ink); }
.bdvs-k::before { content: ''; position: absolute; inset: var(--bw); z-index: 0; border: max(2px, calc(var(--k) * 0.6)) solid var(--bx-ink); border-radius: calc(var(--k) * 3.2);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 calc(var(--k) * 2), rgba(255, 255, 255, 0) calc(var(--k) * 2) calc(var(--k) * 4)), var(--fond); }
.bdvs-k > * { position: relative; z-index: 1; }
/* ta carte : un liseré or autour */
.bdvs-carte.moi .bdvs-k { outline: max(3px, calc(var(--k) * 1)) solid var(--bx-or); outline-offset: max(2px, calc(var(--k) * 0.7)); }

/* LES LISERÉS, rang par rang : de plus en plus larges et travaillés ; à partir de Platinum, la DA devient sombre (Max :
   « méchante, sombre, des démons… rouge, orange »), et l'intérieur de la carte fonce avec */
.bdvs-carte[data-t="pl"] { --bw: calc(var(--k) * 1.8); --cw: calc(var(--k) * 26); --band: repeating-linear-gradient(135deg, #9AA3B2 0 calc(var(--k) * 2.2), #5E6575 calc(var(--k) * 2.2) calc(var(--k) * 4.4)); }
.bdvs-carte[data-t="bronze"] { --bw: calc(var(--k) * 2.2); --cw: calc(var(--k) * 24); --band: linear-gradient(160deg, var(--rkl), var(--rk) 34%, var(--rkm) 64%, var(--rk)); }
.bdvs-carte[data-t="silver"] { --bw: calc(var(--k) * 2.4); --cw: calc(var(--k) * 30); --band: linear-gradient(160deg, #fff, var(--rk) 26%, var(--rkm) 52%, var(--rkl) 74%, var(--rk)); }
.bdvs-carte[data-t="gold"] { --bw: calc(var(--k) * 2.6); --cw: calc(var(--k) * 36);
  --band: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 calc(var(--k) * 0.3), rgba(255, 255, 255, 0) calc(var(--k) * 0.4)) 0 0 / calc(var(--k) * 3.2) calc(var(--k) * 3.2),
    linear-gradient(160deg, #FFF6C8, var(--rk) 24%, var(--rkm) 50%, var(--rk) 74%, #FFF6C8); }
.bdvs-carte[data-t="platinum"] { --bw: calc(var(--k) * 3); --cw: calc(var(--k) * 42);
  --band: repeating-linear-gradient(45deg, rgba(79, 216, 196, 0.5) 0 calc(var(--k) * 0.35), rgba(79, 216, 196, 0) calc(var(--k) * 0.35) calc(var(--k) * 3.2)), linear-gradient(160deg, #3D5059, var(--rkf) 40%, #0B1114 75%, #2C3C44); }
.bdvs-carte[data-t="diamond"] { --bw: calc(var(--k) * 3.2); --cw: calc(var(--k) * 46);
  --band: repeating-linear-gradient(60deg, rgba(226, 240, 255, 0.6) 0 calc(var(--k) * 0.6), rgba(226, 240, 255, 0) calc(var(--k) * 0.6) calc(var(--k) * 3.4)),
    repeating-linear-gradient(-60deg, rgba(124, 178, 255, 0.45) 0 calc(var(--k) * 0.5), rgba(124, 178, 255, 0) calc(var(--k) * 0.5) calc(var(--k) * 4.6)), linear-gradient(160deg, #3B5BA8, var(--rkf) 45%, #070B1E 78%, #2D4C9C); }
.bdvs-carte[data-t="demon"] { --bw: calc(var(--k) * 3.6); --cw: calc(var(--k) * 52);
  --band: var(--motif) 0 100% / calc(var(--k) * 6) calc(var(--k) * 6), linear-gradient(180deg, #4A0606, var(--rkf) 60%, #120101); }
/* (l'aura : la crête la plus large de l'échelle, 96 k — presque toute la carte — dans une boîte de 200 × 50 ; la bande
   est un néant étoilé, traversé d'éclats rouges) */
.bdvs-carte[data-t="aura"] { --bw: calc(var(--k) * 3.8); --cw: calc(var(--k) * 96); --cr: 0.25;
  --band: var(--motif) 0 0 / calc(var(--k) * 23) calc(var(--k) * 23), radial-gradient(ellipse at 50% 0%, #2A0710, rgba(42, 7, 16, 0) 60%), linear-gradient(180deg, #0C0A10, #000 60%, #050307); }
/* (l'intérieur fonce avec le rang ; le démon garde une lueur de braise en bas ; l'aura, des lignes de balayage) */
.bdvs-carte[data-t="platinum"], .bdvs-carte[data-t="diamond"] { --fond: radial-gradient(circle at 50% 44%, #2D5FE0 0, #142C7A 52%, #060E2C 100%); }
.bdvs-carte[data-t="platinum"][data-cote="r"], .bdvs-carte[data-t="diamond"][data-cote="r"] { --fond: radial-gradient(circle at 50% 44%, #D63C34 0, #7E1420 52%, #24050A 100%); }
.bdvs-carte[data-t="demon"] { --fond: radial-gradient(ellipse 90% 45% at 50% 108%, rgba(255, 106, 26, 0.55), rgba(255, 106, 26, 0) 100%), radial-gradient(circle at 50% 44%, #2149B8 0, #0D1D57 52%, #03061A 100%); }
.bdvs-carte[data-t="demon"][data-cote="r"] { --fond: radial-gradient(ellipse 90% 45% at 50% 108%, rgba(255, 106, 26, 0.55), rgba(255, 106, 26, 0) 100%), radial-gradient(circle at 50% 44%, #B82A24 0, #5A0C14 52%, #120204 100%); }
/* (l'aura : un intérieur presque noir — la couleur du camp n'y reste qu'en reflet, autour de la balle) */
.bdvs-carte[data-t="aura"] { --fond: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 calc(var(--k) * 0.3), rgba(0, 0, 0, 0) calc(var(--k) * 0.3) calc(var(--k) * 1)), radial-gradient(circle at 50% 44%, #193A8C 0, #08123A 38%, #020308 72%, #000 100%); }
.bdvs-carte[data-t="aura"][data-cote="r"] { --fond: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 calc(var(--k) * 0.3), rgba(0, 0, 0, 0) calc(var(--k) * 0.3) calc(var(--k) * 1)), radial-gradient(circle at 50% 44%, #8E1A1E 0, #3A070C 38%, #0A0103 72%, #000 100%); }
/* (un liseré intérieur lumineux pour les rangs sombres : turquoise, glace, braise, rouge) */
.bdvs-carte[data-t="platinum"] .bdvs-k::before, .bdvs-carte[data-t="diamond"] .bdvs-k::before, .bdvs-carte[data-t="demon"] .bdvs-k::before, .bdvs-carte[data-t="aura"] .bdvs-k::before {
  box-shadow: 0 0 0 max(1px, calc(var(--k) * 0.45)) var(--rk), inset 0 0 calc(var(--k) * 6) rgba(0, 0, 0, 0.5); }
.bdvs-carte[data-t="demon"] .bdvs-k { box-shadow: calc(var(--k) * 1.8) calc(var(--k) * 1.8) 0 var(--bx-ink), 0 0 calc(var(--k) * 5) calc(var(--k) * 0.8) rgba(255, 74, 28, 0.55); }
/* l'aura déborde de la carte : la réalité dédoublée (une copie rouge à gauche, une blanche à droite), puis un halo noir,
   épais, autour de toute la carte */
.bdvs-carte[data-t="aura"] .bdvs-k { box-shadow: calc(var(--k) * -1) calc(var(--k) * 0.2) 0 #FF2D3D, calc(var(--k) * 1) calc(var(--k) * -0.2) 0 rgba(255, 255, 255, 0.7),
  calc(var(--k) * 1.8) calc(var(--k) * 1.8) 0 var(--bx-ink), 0 0 calc(var(--k) * 3) calc(var(--k) * 1.8) rgba(0, 0, 0, 0.95), 0 0 calc(var(--k) * 12) calc(var(--k) * 4) rgba(6, 0, 4, 0.8); }
.bdvs-carte[data-t="aura"] .bdvs-o-coin { width: calc(var(--k) * 8.5); height: calc(var(--k) * 8.5); }
/* (les côtés : la fumée part de la bande et sort de la carte de 3 k) */
.bdvs-carte[data-t="aura"] .bdvs-o-cote { width: calc(var(--k) * 9.6); height: calc(var(--k) * 24); margin-top: calc(var(--k) * -12); }
.bdvs-carte[data-t="aura"] .bdvs-o-cote.g { left: calc(var(--k) * -3); }
.bdvs-carte[data-t="aura"] .bdvs-o-cote.d { right: calc(var(--k) * -3); }

/* les ornements du cadre (dessins de js/br/vs.js) : la crête en haut, les coins, les côtés, le bas */
.bdvs-cadre { position: absolute !important; inset: calc(-1 * var(--ep)); z-index: 2 !important; pointer-events: none; border-radius: inherit; }
.bdvs-cadre svg, .bdvs-o-crete { position: absolute; display: block; overflow: visible; }
.bdvs-o-crete { z-index: 3 !important; position: absolute !important; left: 50%; width: var(--cw); height: calc(var(--cw) * var(--cr, 0.4333)); top: calc(var(--k) * 8 - var(--cw) * var(--cr, 0.4333)); transform: translateX(-50%); }
.bdvs-o-coin { width: calc(var(--k) * 7); height: calc(var(--k) * 7); }
.bdvs-o-coin.hg { left: calc(var(--k) * -1.8); top: calc(var(--k) * -1.8); }
.bdvs-o-coin.hd { right: calc(var(--k) * -1.8); top: calc(var(--k) * -1.8); transform: rotate(90deg); }
.bdvs-o-coin.bd { right: calc(var(--k) * -1.8); bottom: calc(var(--k) * -1.8); transform: rotate(180deg); }
.bdvs-o-coin.bg { left: calc(var(--k) * -1.8); bottom: calc(var(--k) * -1.8); transform: rotate(270deg); }
.bdvs-o-cote { top: 50%; width: calc(var(--k) * 6); height: calc(var(--k) * 15); margin-top: calc(var(--k) * -7.5); }
.bdvs-o-cote.g { left: calc(var(--ep) + var(--bw) / 2 - var(--k) * 4); }
.bdvs-o-cote.d { right: calc(var(--ep) + var(--bw) / 2 - var(--k) * 4); transform: scaleX(-1); }
.bdvs-o-bas { left: 50%; bottom: calc(var(--k) * -5.5); width: calc(var(--k) * 16.5); height: calc(var(--k) * 11); transform: translateX(-50%); }
/* (l'éclat qui traverse la carte une fois, à l'arrivée) */
.bdvs-brille { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.bdvs-brille::after { content: ''; position: absolute; top: -10%; bottom: -10%; left: -45%; width: 34%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0)); opacity: 0; transform: skewX(-14deg); }

/* l'étiquette « Toi » (or) ou « Bot » (gris), accrochée en haut à gauche */
.bdvs-onglet { position: absolute !important; z-index: 4 !important; left: calc(var(--k) * 4); top: calc(var(--k) * -3.8); padding: calc(var(--k) * 0.6) calc(var(--k) * 1.9) calc(var(--k) * 0.8);
  border: max(2px, calc(var(--k) * 0.6)) solid var(--bx-ink); border-radius: calc(var(--k) * 1.4); background: var(--bx-or); color: var(--bx-ink); box-shadow: calc(var(--k) * 0.6) calc(var(--k) * 0.6) 0 var(--bx-ink);
  font: italic 800 max(14px, calc(var(--k) * 5.2))/1 var(--bx-fc); text-transform: uppercase; letter-spacing: 0.04em; transform: rotate(-4deg); white-space: nowrap; }
.bdvs-carte.bot .bdvs-onglet { background: #D9DEE7; }

/* le pseudo, entier (le script le réduit un peu pour qu'il tienne, puis le passe sur deux lignes équilibrées : jamais
   coupé). Sa zone a la même hauteur sur toutes les cartes de l'écran (une ligne, ou deux si l'un d'eux en a besoin). Le
   contour d'encre suit la taille du texte : un petit pseudo garde un contour fin, lisible. */
.bdvs-pseudo { margin: 0; width: 100%; flex: none; height: calc(var(--fp) * 1.2); display: flex; align-items: center; justify-content: center; text-align: center; }
.p2l .bdvs-pseudo { height: calc(var(--fp) * 2.2); }
.bdvs-pseudo > span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-align: center; padding: 0.06em 0.14em 0.1em 0.08em; font: italic 800 var(--fp)/1.02 var(--bx-fc); text-transform: uppercase; letter-spacing: 0.01em; color: #fff;
  --o: max(1px, 0.065em);
  text-shadow: var(--o) var(--o) 0 var(--bx-ink), calc(-1 * var(--o)) calc(-1 * var(--o)) 0 var(--bx-ink), var(--o) calc(-1 * var(--o)) 0 var(--bx-ink), calc(-1 * var(--o)) var(--o) 0 var(--bx-ink), 0 var(--o) 0 var(--bx-ink), var(--o) 0 0 var(--bx-ink), calc(-1 * var(--o)) 0 0 var(--bx-ink), 0 calc(var(--o) * 1.8) 0 var(--bx-ink); }
.bdvs-carte.moi .bdvs-pseudo > span { color: #FFE27A; }
.bdx-2l { white-space: normal !important; overflow-wrap: break-word; text-wrap: balance; overflow: visible !important; text-align: center; }
/* (un pseudo sur deux lignes : le script le coupe lui-même au milieu, ou après un « _ », un « . », un « - » proches du
   milieu ; chaque moitié reste d'un seul tenant) */
.bdx-2p { white-space: pre !important; line-height: 1.04 !important; }

/* la balle dans le décor de son rang (une boîte carrée qui prend toute la place libre, jusque dans la marge intérieure) */
.bdvs-arene { flex: 1 1 0; min-height: 0; width: calc(100% + var(--k) * 3.2); margin: calc(var(--k) * 0.6) calc(var(--k) * -1.6) 0; container-type: size; display: grid; place-items: center; }
.bdvs-deco { position: relative; width: 100cqmin; height: 100cqmin; }
.bdvs-deco > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bdvs-balle { position: absolute; left: 21%; top: 21%; width: 58%; height: 58%; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  border: max(2.5px, 2.2cqmin) solid var(--bx-ink); background: var(--bc, #DDD8CD); box-shadow: inset 0 calc(-1 * max(3px, 2.4cqmin)) 0 rgba(0, 0, 0, 0.16); }
.bdvs-balle img, .bdvs-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bdvs-ini { font: italic 800 26cqmin/1 var(--bx-fc); color: var(--bx-ink); }
.bdvs-balle.img .bdvs-ini, .bdvs-mini.img .bdvs-ini { visibility: hidden; }
.bdvs-d-anim g { transform-box: fill-box; }
/* (l'aura : deux tranches du portrait, posées exactement sur lui et invisibles au repos ; elles ne se montrent, décalées,
   que pendant les saccades) */
.bdvs-tr { position: absolute; inset: 0; z-index: 2; background: var(--img, none) center / cover no-repeat, var(--bc, #DDD8CD); opacity: 0; pointer-events: none; }
.bdvs-tr.t1 { clip-path: inset(30% 0 56% 0); }
.bdvs-tr.t2 { clip-path: inset(61% 0 28% 0); filter: grayscale(1) brightness(1.5) contrast(1.4); }

/* le ruban du rang, sous la balle (jamais d'Elo) */
/* (sa hauteur est fixe : un ruban dont le texte a dû rétrécir garde la même place, le nom de la balle reste aligné) */
.bdvs-ruban { margin: calc(var(--k) * -6.5) 0 0; z-index: 2 !important; max-width: 100%; flex: none; display: flex; justify-content: center; align-items: center;
  height: calc(var(--fr) + var(--k) * 2 + 2 * max(2px, calc(var(--k) * 0.75))); }
.bdvs-ruban > span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; padding: calc(var(--k) * 0.9) calc(var(--k) * 3) calc(var(--k) * 1.1);
  border: max(2px, calc(var(--k) * 0.75)) solid var(--bx-ink); border-radius: calc(var(--k) * 1.6); background: var(--rk); color: var(--bx-ink); box-shadow: calc(var(--k) * 0.7) calc(var(--k) * 0.7) 0 var(--bx-ink);
  font: italic 800 var(--fr)/1 var(--bx-fc); text-transform: uppercase; letter-spacing: 0.02em; }
.bdvs-carte[data-t="nc"] .bdvs-ruban > span, .bdvs-carte[data-t="pl"] .bdvs-ruban > span { background: #2B2F3A; color: #fff; }
.bdvs-carte[data-t="platinum"] .bdvs-ruban > span { background: linear-gradient(180deg, #8DF0E2, var(--rk)); }
.bdvs-carte[data-t="diamond"] .bdvs-ruban > span { background: linear-gradient(180deg, #CFE3FF, var(--rk)); }
.bdvs-carte[data-t="demon"] .bdvs-ruban > span { background: linear-gradient(180deg, #FF9A2E, #FF4A1C 55%, #C8102E); color: #fff; text-shadow: var(--bx-out); }
.bdvs-carte[data-t="aura"] .bdvs-ruban > span { background: #08070C; color: #fff; box-shadow: calc(var(--k) * 0.7) calc(var(--k) * 0.7) 0 var(--rk), inset 0 0 0 max(1px, calc(var(--k) * 0.35)) var(--rk); text-shadow: -1.5px 0 0 var(--rk), 1px 1px 0 #000; }

/* le pied : le nom de la balle, centré, sur deux lignes s'il le faut (zone de la même hauteur sur toutes les cartes) */
.bdvs-pied { flex: none; width: 100%; height: calc(var(--fn) * 1.2); margin-top: max(3px, calc(var(--k) * 1.6)); display: flex; align-items: center; justify-content: center; }
.n2l .bdvs-pied { height: calc(var(--fn) * 2.3); }
.bdvs-bnom { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-align: center; padding: 0 0.1em; font: 700 var(--fn)/1.08 var(--bx-fc); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 0 rgba(21, 21, 21, 0.6); }

/* déconnecté : le contenu de la carte se grise ; le bandeau, lui, reste en couleur (rouge, texte blanc) ; « De retour ! »
   en vert */
.bdvs-off { position: absolute; z-index: 6; left: 1%; right: 1%; top: 40%; margin: 0; display: none; place-items: center; padding: calc(var(--k) * 1.8) calc(var(--k) * 2) calc(var(--k) * 2.1);
  background: #E5484D; border: max(2px, calc(var(--k) * 0.7)) solid var(--bx-ink); box-shadow: calc(var(--k) * 0.9) calc(var(--k) * 0.9) 0 var(--bx-ink); transform: rotate(-6deg); }
.bdvs-off span { font: italic 800 max(13px, calc(var(--k) * 7))/1 var(--bx-fc); text-transform: uppercase; color: #fff; letter-spacing: 0.03em; text-shadow: var(--bx-out); white-space: nowrap; }
.bdvs-carte.off .bdvs-k { filter: grayscale(1) brightness(0.72); }
.bdvs-carte.off .bdvs-off, .bdvs-carte.back .bdvs-off { display: grid; }
.bdvs-carte.back .bdvs-off { background: #1FB873; }

/* ─── le centre : « VS » et l'historique ─── */
.bdvs-mid { position: relative; z-index: 2; flex: none; align-self: center; width: var(--mid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2.2); }
.bdvs-vs { position: relative; width: calc(var(--u) * 18); aspect-ratio: 1; display: grid; place-items: center; transform: rotate(-5deg); }
.bdvs[data-fmt="2"] .bdvs-vs { width: calc(var(--u) * 15); }
.bdvs-vs-burst { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(calc(var(--u) * 0.7) calc(var(--u) * 0.7) 0 var(--bx-ink)); }
.bdvs-vs b { position: relative; font: italic 800 calc(var(--u) * 8.6)/1 var(--bx-fc); color: #fff; padding: 0 0.08em 0.04em 0; letter-spacing: -0.02em;
  text-shadow: 3px 3px 0 var(--bx-ink), -2px -2px 0 var(--bx-ink), 2px -2px 0 var(--bx-ink), -2px 2px 0 var(--bx-ink), 0 3px 0 var(--bx-ink), 3px 0 0 var(--bx-ink), -3px 0 0 var(--bx-ink), calc(var(--u) * 0.5) calc(var(--u) * 0.6) 0 var(--bx-ink); }
.bdvs[data-fmt="2"] .bdvs-vs b { font-size: calc(var(--u) * 7.2); }
.bdvs-choc { position: absolute; inset: 0; border-radius: 50%; border: calc(var(--u) * 1) solid #fff; opacity: 0; pointer-events: none; }
/* l'historique : une carte du jeu (papier, encre, ombre décalée) */
.bdvs-histo { margin: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 1.3) calc(var(--u) * 2) calc(var(--u) * 1.5);
  border: calc(var(--u) * 0.45) solid var(--bx-ink); border-radius: calc(var(--u) * 1.4); background: var(--bx-carte); color: var(--bx-ink); box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--bx-ink); text-align: center; }
.bdvs-h-k { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; font: 700 max(14px, calc(var(--u) * 2.2))/1.1 var(--bx-fc); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(21, 21, 21, 0.62); }
.bdvs-h-v { display: block; font: italic 800 calc(var(--u) * 7.4)/0.95 var(--bx-fc); white-space: nowrap; font-variant-numeric: tabular-nums; padding: 0 0.06em; }
.bdvs-h-v.vide { max-width: 100%; overflow: hidden; font-size: max(15px, calc(var(--u) * 3.4)); line-height: 1.05; padding: 0.04em 0.1em 0.1em; text-transform: uppercase; }
.bdvs-h-l { display: block; font: 600 max(14px, calc(var(--u) * 1.9))/1.25 var(--bx-fb); color: rgba(21, 21, 21, 0.72); text-wrap: balance; }
/* en 2 VS 2 : une ligne par adversaire, sa balle en petit puis le score */
.bdvs-h-rangs { margin: 0; padding: 0; list-style: none; width: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); }
.bdvs-h-rangs li { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1); min-width: 0; }
.bdvs-mini-w { position: relative; flex: none; display: block; }
.bdvs-mini { position: relative; width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  border: max(2px, calc(var(--u) * 0.4)) solid var(--bx-ink); background: var(--bc, #DDD8CD); }
/* (la ligne d'un bot : l'étiquette « Bot » de sa carte, en petit, posée sur le bas de sa mini-balle — c'est un bilan
   contre sa balle, pas un historique entre joueurs) */
.bdvs-mini-bot { position: absolute; left: 50%; bottom: calc(var(--u) * -0.7); padding: 0.06em 0.3em 0.12em; transform: translateX(-50%) rotate(-4deg);
  border: max(1.5px, calc(var(--u) * 0.3)) solid var(--bx-ink); border-radius: calc(var(--u) * 0.6); background: #D9DEE7; color: var(--bx-ink); box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--bx-ink);
  font: italic 800 max(14px, calc(var(--u) * 1.5))/1 var(--bx-fc); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.bdvs-h-rangs li.bot .bdvs-mini { border-color: #5E6575; }
.bdvs-h-rangs li.bot { margin-bottom: calc(var(--u) * 0.9); }
.bdvs-mini .bdvs-ini { font-size: calc(var(--u) * 2.6); }
.bdvs-h-s { display: block; min-width: 0; max-width: 100%; font: italic 800 calc(var(--u) * 4.6)/1.1 var(--bx-fc); white-space: nowrap; font-variant-numeric: tabular-nums; padding: 0 0.06em; }
/* (« Première rencontre » : sur une ligne, ou sur deux — « Première » / « rencontre », la seule coupure possible) */
.bdvs-h-s.vide { font-size: max(14px, calc(var(--u) * 2.2)); line-height: 1.05; text-transform: uppercase; color: rgba(21, 21, 21, 0.75); text-align: left; white-space: normal; }
/* (les nuls, rares : leur propre ligne, sous la légende) */
.bdvs-h-n { display: block; font: 700 max(14px, calc(var(--u) * 1.8))/1.2 var(--bx-fb); color: rgba(21, 21, 21, 0.6); white-space: nowrap; }
.bdvs-histo.deux .bdvs-h-l { font-size: max(14px, calc(var(--u) * 1.8)); }

/* ─── le bas : la barre de chargement, puis l'astuce (ou la ligne de poids), dans le style des cartes du jeu ─── */
.bdvs-bas { grid-row: 3; position: relative; z-index: 2; margin-top: calc(var(--u) * 1.2); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); min-width: 0; }
.bdvs-charge { width: min(100%, calc(var(--u) * 116)); display: flex; align-items: center; gap: calc(var(--u) * 1.8); }
.bdvs-haut > .bdvs-charge { display: none; }
.bdvs-etat { flex: none; width: calc(var(--u) * 31); text-align: right; font: italic 800 max(12px, calc(var(--u) * 2.6))/1 var(--bx-fc); text-transform: uppercase; letter-spacing: 0.03em; text-shadow: var(--bx-out); white-space: nowrap; }
.bdvs.parti .bdvs-etat { color: var(--bx-or); }
.bdvs-barre { position: relative; flex: 1; min-width: 0; height: max(10px, calc(var(--u) * 2)); border: max(2.5px, calc(var(--u) * 0.45)) solid var(--bx-ink); border-radius: 99px; background: rgba(251, 250, 247, 0.92); overflow: hidden; box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--bx-ink); }
.bdvs-barre i { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0 calc(var(--u) * 1), rgba(255, 255, 255, 0) calc(var(--u) * 1) calc(var(--u) * 2)), var(--bx-or); transform-origin: 0 50%; transform: scaleX(0); }
.bdvs-astuce { margin: 0; max-width: min(100%, calc(var(--u) * 150)); display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 0.6) calc(var(--u) * 1.8) calc(var(--u) * 0.7) calc(var(--u) * 0.7);
  border: calc(var(--u) * 0.4) solid var(--bx-ink); border-radius: calc(var(--u) * 1.2); background: var(--bx-carte); color: var(--bx-ink); box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--bx-ink);
  font: 600 max(12px, calc(var(--u) * 2))/1.25 var(--bx-fb); }
.bdvs-astuce b { flex: none; padding: calc(var(--u) * 0.35) calc(var(--u) * 0.9) calc(var(--u) * 0.45); border-radius: calc(var(--u) * 0.7); background: var(--bx-or); border: max(1.5px, calc(var(--u) * 0.3)) solid var(--bx-ink);
  font: italic 800 max(12px, calc(var(--u) * 2))/1 var(--bx-fc); text-transform: uppercase; letter-spacing: 0.06em; }
.bdvs-astuce.note { padding-left: calc(var(--u) * 1.8); background: #FFE27A; font-weight: 700; }

/* le message d'un instant (« La partie commence : tu ne peux plus annuler. », « Déconnecté ») : à l'écran VS, à la place
   de l'astuce (qui s'efface le temps du message) ; à « Partie trouvée », sous le compteur */
.bdx-msg { position: relative; z-index: 9; margin: 0; max-width: 100%; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.8) calc(var(--u) * 0.7);
  border: max(2px, calc(var(--u) * 0.35)) solid #fff; border-radius: calc(var(--u) * 1.2); background: var(--bx-ink); color: #fff; text-align: center; box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 rgba(21, 21, 21, 0.6);
  font: 700 max(12px, calc(var(--u) * 2))/1.25 var(--bx-fb); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.bdx-msg.on { opacity: 1; }
.bdvs-bas > .bdx-msg { position: absolute; left: 50%; bottom: 0; width: max-content; transform: translateX(-50%); }
.bdvs-bas:has(> .bdx-msg.on) > .bdvs-astuce { opacity: 0; }
.bdx-pt > .bdx-msg { grid-row: 6; align-self: start; justify-self: center; }

/* ═══════════════ LES ANIMATIONS (transform et opacity seulement) ═══════════════ */
@keyframes bdxFondu { from { opacity: 0; } }
@keyframes bdxDescend { from { opacity: 0; transform: translateY(-60%); } }
@keyframes bdxBande { 0% { opacity: 0; transform: rotate(-3deg) scaleY(0); } 100% { opacity: 1; transform: rotate(-3deg) scaleY(1); } }
@keyframes bdxRebond { 0% { opacity: 0; transform: scale(1.4); } 60% { opacity: 1; transform: scale(0.92); } 100% { transform: scale(1); } }
@keyframes bdxPop { 0% { transform: scale(1.8); opacity: 0.2; } 100% { transform: scale(1); opacity: 1; } }
@keyframes bdxMed { 0% { transform: scale(0.86); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
/* l'arrivée de l'écran VS : les cartes se plaquent (la gauche, puis la droite), « VS » se tamponne, l'historique monte */
.bdvs.entre .bdvs-haut { animation: bdxDescend 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1) both 0.15s; }
.bdvs.entre .bdvs-camp.l .bdvs-carte { animation: bdvsEntreL 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; animation-delay: calc(0.22s + var(--n, 0) * 0.08s); }
.bdvs.entre .bdvs-camp.r .bdvs-carte { animation: bdvsEntreR 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; animation-delay: calc(0.32s + var(--n, 0) * 0.08s); }
.bdvs.entre .bdvs-vs { animation: bdvsTampon 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2) both 0.72s; }
.bdvs.entre .bdvs-histo { animation: bdvsMonte 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1) both 0.9s; }
.bdvs.entre .bdvs-bas { animation: bdxFondu 0.4s ease-out both 0.5s; }
.bdvs.entre .bdvs-brille::after { animation: bdvsBrille 0.6s ease-in-out both; animation-delay: calc(1s + var(--n, 0) * 0.06s); }
.bdvs.choc .bdvs-choc { animation: bdvsChoc 0.5s ease-out both; }
.bdvs.choc .bdvs-scene { animation: bdvsSecoue 0.28s linear; }
@keyframes bdvsEntreL { 0% { opacity: 0; transform: translateX(-140%) rotate(-10deg); } 65% { opacity: 1; transform: translateX(5%) rotate(1.5deg); } 100% { opacity: 1; transform: none; } }
@keyframes bdvsEntreR { 0% { opacity: 0; transform: translateX(140%) rotate(10deg); } 65% { opacity: 1; transform: translateX(-5%) rotate(-1.5deg); } 100% { opacity: 1; transform: none; } }
@keyframes bdvsTampon { 0% { opacity: 0; transform: scale(2.6) rotate(-24deg); } 60% { opacity: 1; transform: scale(0.86) rotate(-2deg); } 100% { opacity: 1; transform: scale(1) rotate(-5deg); } }
@keyframes bdvsMonte { from { opacity: 0; transform: translateY(30%); } }
@keyframes bdvsBrille { 0% { opacity: 0; transform: translateX(0) skewX(-14deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(480%) skewX(-14deg); } }
@keyframes bdvsChoc { 0% { opacity: 0.95; transform: scale(0.5); } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes bdvsSecoue { 0%, 100% { transform: none; } 20% { transform: translate(-0.6%, 0.5%); } 45% { transform: translate(0.5%, -0.4%); } 70% { transform: translate(-0.3%, 0.2%); } }
/* LE DÉPART (0,55 s) : tout s'en va franchement, sans fondu enchaîné — les cartes s'envolent vers leur côté, « VS » et
   l'historique implosent, le titre monte, le bas descend ; puis les deux moitiés du fond s'écartent comme des portes et
   découvrent l'arène (rien ne reste à moitié transparent par-dessus le jeu) */
.bdvs.sort .bdvs-camp.l .bdvs-slot { animation: bdvsSortL 0.34s cubic-bezier(0.55, 0, 0.9, 0.45) both; animation-delay: calc((1 - var(--n, 0)) * 0.04s); }
.bdvs.sort .bdvs-camp.r .bdvs-slot { animation: bdvsSortR 0.34s cubic-bezier(0.55, 0, 0.9, 0.45) both; animation-delay: calc(var(--n, 0) * 0.04s); }
.bdvs.sort .bdvs-mid { animation: bdvsImplose 0.24s cubic-bezier(0.6, 0, 0.9, 0.5) both; }
.bdvs.sort .bdvs-haut { animation: bdvsHautSort 0.3s cubic-bezier(0.6, 0, 0.9, 0.5) both; }
.bdvs.sort .bdvs-bas { animation: bdvsBasSort 0.3s cubic-bezier(0.6, 0, 0.9, 0.5) both; }
.bdvs.sort .bdvs-porte.l { animation: bdvsPorteL 0.4s cubic-bezier(0.6, 0, 0.85, 0.4) both 0.15s; }
.bdvs.sort .bdvs-porte.r { animation: bdvsPorteR 0.4s cubic-bezier(0.6, 0, 0.85, 0.4) both 0.15s; }
@keyframes bdvsSortL { to { transform: translateX(-120vw) rotate(-16deg); } }
@keyframes bdvsSortR { to { transform: translateX(120vw) rotate(16deg); } }
@keyframes bdvsImplose { 40% { transform: scale(1.15); } to { transform: scale(0) rotate(-30deg); } }
@keyframes bdvsHautSort { to { transform: translateY(calc(-100% - var(--u) * 8 - 40px)); } }
@keyframes bdvsBasSort { to { transform: translateY(calc(100% + var(--u) * 8 + 40px)); } }
@keyframes bdvsPorteL { to { transform: translateX(-62%); } }
@keyframes bdvsPorteR { to { transform: translateX(62%); } }

/* L'AURA (le sommet) : la seule animation continue de l'écran — la réalité « glitche » par saccades : les bandes se
   décalent d'un coup, quelques fois toutes les 3 s, puis reviennent (steps : aucun glissement, une vraie coupure) */
.bdvs.a-aura .bdvs-carte[data-t="aura"] .bdvs-g1 { animation: bdvsGlitch1 3s steps(1, end) infinite; }
.bdvs.a-aura .bdvs-carte[data-t="aura"] .bdvs-g2 { animation: bdvsGlitch2 3s steps(1, end) infinite; }
.bdvs.a-aura .bdvs-carte[data-t="aura"] .bdvs-g3 { animation: bdvsGlitch3 3s steps(1, end) infinite; }
.bdvs.a-aura .bdvs-carte[data-t="aura"] .bdvs-deco { animation: bdvsTremble 3s steps(1, end) infinite; }
.bdvs.a-aura .bdvs-carte[data-t="aura"] .bdvs-tr.t1 { animation: bdvsTranche1 3s steps(1, end) infinite; }
.bdvs.a-aura .bdvs-carte[data-t="aura"] .bdvs-tr.t2 { animation: bdvsTranche2 3s steps(1, end) infinite; }
@keyframes bdvsTranche1 { 0%, 100% { opacity: 0; transform: none; } 70% { opacity: 1; transform: translateX(9%); } 73% { opacity: 1; transform: translateX(-5%); } 76% { opacity: 0; transform: none; } 88% { opacity: 1; transform: translateX(12%); } 90% { opacity: 0; transform: none; } }
@keyframes bdvsTranche2 { 0%, 100% { opacity: 0; transform: none; } 71% { opacity: 1; transform: translateX(-11%); } 75% { opacity: 1; transform: translateX(4%); } 77% { opacity: 0; transform: none; } 89% { opacity: 1; transform: translateX(-7%); } 91% { opacity: 0; transform: none; } }
@keyframes bdvsGlitch1 { 0%, 100% { transform: none; } 70% { transform: translateX(14px); } 73% { transform: translateX(-8px); } 76% { transform: none; } 88% { transform: translateX(22px); } 90% { transform: none; } }
@keyframes bdvsGlitch2 { 0%, 100% { transform: none; } 71% { transform: translateX(-18px); } 75% { transform: translateX(6px); } 77% { transform: none; } 89% { transform: translateX(-10px); } 91% { transform: none; } }
@keyframes bdvsGlitch3 { 0%, 100% { opacity: 1; transform: none; } 70% { opacity: 0; } 74% { opacity: 1; transform: translate(-6px, 4px); } 78% { transform: none; } 89% { transform: translate(8px, -6px); } 91% { transform: none; } }
@keyframes bdvsTremble { 0%, 100% { transform: none; } 70% { transform: translateX(1.5%) skewX(-4deg); } 72% { transform: translateX(-1%); } 74% { transform: none; } 88% { transform: translateX(-1.5%) skewX(3deg); } 90% { transform: none; } }

/* figé (captures, essais) : aucune animation, tout est à sa place */
.bdx-fige, .bdx-fige * { animation: none !important; transition: none !important; }
/* « moins d'animations » : des fondus, rien ne bouge, rien ne tourne, rien ne glitche */
.bdx-calme *, .bdx-calme { animation-name: bdxFondu !important; }
.bdx-calme .bdvs-g1, .bdx-calme .bdvs-g2, .bdx-calme .bdvs-g3, .bdx-calme .bdvs-deco, .bdx-calme .bdvs-tr, .bdvs.bdx-calme.choc .bdvs-scene, .bdvs.bdx-calme .bdvs-choc { animation: none !important; }
.bdx-calme .bdvs-brille { display: none; }
/* (la sortie en « moins d'animations » : en deux temps, jamais de double exposition — le contenu s'efface sur le fond
   encore plein, puis le fond s'efface sur l'arène) */
.bdvs.bdx-calme.sort, .bdvs.bdx-calme.sort * { animation: none !important; }
.bdvs.bdx-calme.sort > .bdvs-haut, .bdvs.bdx-calme.sort > .bdvs-scene, .bdvs.bdx-calme.sort > .bdvs-bas { animation: bdxEfface 0.22s ease-in both !important; }
.bdvs.bdx-calme.sort > .bdvs-bg { animation: bdxEfface 0.3s ease-in 0.22s both !important; }
@keyframes bdxEfface { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bdx-volet-l, .bdx-volet-r { transform: none !important; opacity: 0; transition: opacity 0.25s linear; }
  .bdx-volet.ferme .bdx-volet-l, .bdx-volet.ferme .bdx-volet-r { opacity: 1; }
  .bdx-volet.ouvre .bdx-volet-l, .bdx-volet.ouvre .bdx-volet-r { opacity: 0; }
  .bdvs-g1, .bdvs-g2, .bdvs-g3, .bdvs-deco, .bdvs-tr { animation: none !important; }
}

/* ═══════════════ LA MISE EN PAGE COMPACTE (téléphone en paysage, fenêtre basse ; et téléphone en portrait) ═══════════════ */
@media (max-height: 520px), (orientation: portrait) and (max-width: 700px) {
  .bdx-pil { font-size: 15px; border-width: 3px; border-radius: 9px; box-shadow: 3px 3px 0 var(--bx-ink); }
  .bdx-pil-f { padding: 5px 9px 6px; border-right-width: 3px; }
  .bdx-pil-r { padding: 5px 11px 6px 9px; }
  .bdx-msg { padding: 2px 10px 3px; border-width: 2px; border-radius: 7px; font-size: 12px; line-height: 1.2; box-shadow: 2px 2px 0 rgba(21, 21, 21, 0.6); }

  /* (les petits téléphones, 300 à 330 px de haut : l'écart et le médaillon se resserrent avec la hauteur, pour que la ligne
     « défi » ET le message « tu ne peux plus annuler » tiennent sous le compteur, dans l'écran) */
  .bdx-pt { row-gap: clamp(6px, 2.1vh, 8px); padding: max(8px, var(--sa-t)) calc(12px + var(--sa-r)) max(8px, var(--sa-b)) calc(12px + var(--sa-l)); }
  .bdx-pt-bande { padding: 8px 0 10px; border-top-width: 4px; border-bottom-width: 4px; box-shadow: 0 5px 0 rgba(21, 21, 21, 0.45); }
  .bdx-pt-bande b { font-size: clamp(32px, 10.5vh, 50px); text-shadow: 2px 2px 0 var(--bx-ink), -2px -2px 0 var(--bx-ink), 2px -2px 0 var(--bx-ink), -2px 2px 0 var(--bx-ink), 0 2px 0 var(--bx-ink), 2px 0 0 var(--bx-ink), -2px 0 0 var(--bx-ink), 4px 5px 0 var(--bx-ink); }
  .bdx-pt-cpt { gap: 5px; }
  .bdx-pt-dans { font-size: 14px; text-shadow: var(--bx-out), 2.5px 2.5px 0 var(--bx-ink); }
  .bdx-pt-med { width: clamp(84px, calc(36vh - 24px), 116px); }
  .bdx-pt-anneau { filter: drop-shadow(3px 3px 0 var(--bx-ink)); }
  .bdx-pt-n { font-size: clamp(52px, 19vh, 74px); text-shadow: 3px 3px 0 var(--bx-ink), -2px -2px 0 var(--bx-ink), 2px -2px 0 var(--bx-ink), -2px 2px 0 var(--bx-ink), 0 3px 0 var(--bx-ink), 3px 0 0 var(--bx-ink), -3px 0 0 var(--bx-ink); }
  .bdx-pt-defi { gap: 6px; padding: 4px 10px 5px 7px; border-width: 2.5px; border-radius: 8px; box-shadow: 3px 3px 0 var(--bx-ink); font-size: 13px; }

  .bdvs { --wmax: 252px; --mid: 150px; --gc: 10px; --gap: 8px; --padx: calc(20px + var(--sa-l) + var(--sa-r)); --marge: 15; --pt: 8.2;
    --sh: calc(var(--W) * 1.17 + 74px + var(--p2) + var(--n2) + var(--ob));
    row-gap: 4px; padding: max(8px, var(--sa-t)) calc(10px + var(--sa-r)) max(6px, var(--sa-b)) calc(10px + var(--sa-l)); }
  .bdvs[data-fmt="2"] { --wmax: 999px; --mid: 106px; --gc: 8px; --gap: 7px; --padx: calc(20px + var(--sa-l) + var(--sa-r)); }
  .bdvs.p2l { --p2: 17px; }
  .bdvs.n2l { --n2: 14px; }
  .bdvs[data-fmt="1"] .bdvs-carte { --fp: max(16px, calc(var(--k) * 10)); }
  /* (au téléphone, l’étiquette garde ses 12 px sur une carte plus petite : elle remonte d’autant, loin du pseudo) */
  .bdvs-onglet { font-size: max(12px, calc(var(--k) * 5.2)); top: calc(var(--k) * -3.8 - 5px); left: calc(var(--k) * 2.5); }
  .bdvs .bdx-pil { font-size: 14px; }
  .bdvs .bdx-pil-f { padding: 4px 8px 5px; }
  .bdvs .bdx-pil-r { padding: 4px 10px 5px 8px; }
  .bdvs-pied { margin-top: 2px; height: calc(var(--fn) * 1.14); }
  .bdvs-pseudo { height: calc(var(--fp) * 1.14); }
  .bdvs-haut { gap: 8px; }
  .bdvs-serie { gap: 6px; padding: 4px 9px 5px; border-width: 3px; border-radius: 9px; box-shadow: 3px 3px 0 var(--bx-ink); }
  .bdvs-serie span { font-size: 12px; letter-spacing: 0.08em; }
  .bdvs-serie b { font-size: 15px; }
  .bdvs-mid { gap: 8px; }
  .bdvs-vs { width: clamp(54px, 19vh, 84px); }
  .bdvs[data-fmt="2"] .bdvs-vs { width: clamp(48px, 15vh, 66px); }
  .bdvs-vs-burst { filter: drop-shadow(3px 3px 0 var(--bx-ink)); }
  .bdvs-vs b, .bdvs[data-fmt="2"] .bdvs-vs b { font-size: clamp(24px, 8.6vh, 38px); text-shadow: 2px 2px 0 var(--bx-ink), -1.5px -1.5px 0 var(--bx-ink), 1.5px -1.5px 0 var(--bx-ink), -1.5px 1.5px 0 var(--bx-ink), 0 2px 0 var(--bx-ink), 2px 0 0 var(--bx-ink), -2px 0 0 var(--bx-ink), 3px 3px 0 var(--bx-ink); }
  .bdvs[data-fmt="2"] .bdvs-vs b { font-size: clamp(22px, 7.4vh, 30px); }
  .bdvs-choc { border-width: 4px; }
  .bdvs-histo { gap: 2px; padding: 5px 7px 6px; border-width: 2.5px; border-radius: 9px; box-shadow: 3px 3px 0 var(--bx-ink); }
  .bdvs-h-k { font-size: 12px; letter-spacing: 0.08em; }
  .bdvs-h-v { font-size: clamp(28px, 10vh, 40px); }
  .bdvs-h-v.vide { font-size: 15px; white-space: normal; }
  .bdvs-h-l, .bdvs-histo.deux .bdvs-h-l { font-size: 12px; line-height: 1.15; }
  .bdvs-h-rangs { gap: 4px; margin: 1px 0; }
  .bdvs-h-rangs li { gap: 4px; justify-content: flex-start; }
  .bdvs-mini { width: 26px; height: 26px; border-width: 2px; }
  .bdvs-mini-bot { bottom: -6px; padding: 0 3px 1px; border-width: 1.5px; border-radius: 4px; box-shadow: 1.5px 1.5px 0 var(--bx-ink); font-size: 12px; }
  .bdvs-h-rangs li.bot { margin-bottom: 6px; }
  .bdvs-h-n { font-size: 12px; }
  .bdvs-mini .bdvs-ini { font-size: 13px; }
  .bdvs-h-s { font-size: 19px; }
  .bdvs-h-s.vide { font-size: 12px; white-space: normal; }

  .bdvs-bas { gap: 4px; margin-top: 3px; }
  .bdvs-bas > .bdvs-charge { display: none; }
  .bdvs-haut { flex-wrap: nowrap; }
  .bdvs-haut > .bdvs-charge { display: flex; flex: 0 1 300px; width: auto; min-width: 0; gap: 8px; }
  .bdvs-haut > .bdvs-charge .bdvs-barre { min-width: 50px; }
  .bdvs-etat { width: auto; font-size: 14px; }
  .bdvs-barre { height: 10px; border-width: 2px; box-shadow: 2px 2px 0 var(--bx-ink); }
  .bdvs-astuce { max-width: 100%; gap: 7px; padding: 2px 10px 3px 3px; border-width: 2px; border-radius: 7px; box-shadow: 2px 2px 0 var(--bx-ink); font-size: 12px; line-height: 1.2; }
  .bdvs-astuce b { padding: 2px 5px 3px; border-width: 1.5px; border-radius: 5px; font-size: 12px; }
  .bdvs-astuce.note { padding-left: 10px; }
}
/* (« Partie trouvée » sur les plus petits téléphones, 340 px de haut ou moins : le titre du mode et le bandeau
   s'amincissent, et le message « tu ne peux plus annuler » tient encore sous la ligne « défi », 8 px au-dessus du bord) */
@media (max-height: 340px) {
  .bdx-pt-mode { font-size: 13px; }
  .bdx-pt-mode .bdx-pil-f { padding: 3px 8px 4px; }
  .bdx-pt-mode .bdx-pil-r { padding: 3px 10px 4px 8px; }
  .bdx-pt-bande { padding: 6px 0 8px; }
  .bdx-pt-bande b { font-size: clamp(29px, 10vh, 50px); }
  .bdx-pt-cpt { gap: 4px; }
}

/* (téléphone tenu en portrait : le jeu demande de le tourner, mais l'écran reste lisible : ton camp en haut, l'adversaire
   en bas, la couture à l'horizontale) */
@media (orientation: portrait) and (max-width: 700px) {
  .bdx-pt-bande b { font-size: 11vw; }
  .bdx-pt-dans { font-size: 4.2vw; }
  .bdvs, .bdvs[data-fmt="2"] { --R: 1.46; --W: min(calc((100vw - 24px - (var(--n) - 1) * 10px) / var(--n)), calc((100vh - 230px) / 2 / var(--R)), 260px);
    grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 8px; padding: max(12px, var(--sa-t)) 12px max(12px, var(--sa-b)) 12px; }
  .bdvs-moitie.l { clip-path: polygon(0 0, 100% 0, 100% 45%, 0 55%);
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 8px, rgba(255, 255, 255, 0) 8px 16px), repeating-conic-gradient(from 0deg at 50% 26%, rgba(255, 255, 255, 0.08) 0 6deg, rgba(255, 255, 255, 0) 6deg 12deg), radial-gradient(circle at 50% 26%, var(--b1) 0, var(--b2) 42%, var(--b3) 100%); }
  .bdvs-moitie.r { clip-path: polygon(0 55%, 100% 45%, 100% 100%, 0 100%);
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 8px, rgba(255, 255, 255, 0) 8px 16px), repeating-conic-gradient(from 0deg at 50% 74%, rgba(255, 255, 255, 0.08) 0 6deg, rgba(255, 255, 255, 0) 6deg 12deg), radial-gradient(circle at 50% 74%, var(--r1) 0, var(--r2) 42%, var(--r3) 100%); }
  .bdvs-couture .v { display: none; }
  .bdvs-couture .h { display: inline; }
  .bdvs-scene { flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
  .bdvs-camp { gap: 10px; }
  .bdvs-slot { height: calc(var(--W) * var(--R)); }
  .bdvs-mid, .bdvs[data-fmt="2"] .bdvs-mid { width: auto; flex-direction: row; gap: 12px; }
  .bdvs-vs, .bdvs[data-fmt="2"] .bdvs-vs { width: 62px; }
  .bdvs-etat { width: auto; }
  .bdvs-haut { flex-wrap: wrap; }
  .bdvs.sort .bdvs-porte.l { animation-name: bdvsPorteH; }
  .bdvs.sort .bdvs-porte.r { animation-name: bdvsPorteB; }
  @keyframes bdvsPorteH { to { transform: translateY(-62%); } }
  @keyframes bdvsPorteB { to { transform: translateY(62%); } }
}