/* ═══════════════ LE GROUPE (Js', 03/10) ═══════════════
   « refais l'UI de cette fenêtre dans le thème du bouton Groupe 1/3, avec les mêmes couleurs » : la fenêtre prend le
   vert-bleu du bouton (#12A99C) en dégradé, avec des cartes blanches posées dessus, le gros trait d'encre et les ombres
   décalées du jeu (comme le coffre et le panneau du salon perso). Dedans : qui est dans le groupe (3 places), son code en
   grand et son lien à envoyer, rejoindre le groupe d'un pote avec SON code, « Tes amis en ligne » (les amis de l'associé,
   js/br/amis.js : #partyAmis), le quitter.
   Deux mises en page, les mêmes mots :
   - un invité (pas de compte, donc pas d'amis : une ligne « Avec un compte, invite tes amis d'un appui ») — sur
     ordinateur, les potes en haut puis les deux cartes côte à côte ; au téléphone en paysage (520 px de haut ou moins),
     trois colonnes — les potes, le code, rejoindre ;
   - un compte (« Tes amis en ligne » a son titre, .pa-head) — une troisième carte blanche, « Tes amis », à côté des deux
     autres ; au téléphone, les potes passent en une rangée au-dessus des trois cartes. La liste des amis défile dans sa
     carte (5 au plus), jamais la fenêtre.
   La boîte porte la classe pg-box (plus party-box) : les anciennes règles de cette fenêtre (br.css, et la mise en page à
   deux colonnes de l'ancienne fenêtre avec des amis, css/amis.css) ne s'appliquent plus à celle-ci ; les styles des lignes
   d'amis (.ba-row, .pa-head…) restent ceux de css/amis.css, ajustés ici aux cartes blanches.
   Aussi : le bouton « Groupe » (toujours là) et les modes trop petits pour le groupe (« Vous êtes trop »). */

/* les mesures de l'entrée : la fenêtre est hors de #hub, elle reçoit ici son unité (--u) et ses contours d'encre, comme
   le coffre (sinon les boutons .hub-btn et .hub-go perdent bordure, ombre et police) */
#partyModal {
  --u: clamp(6px, min(0.521vw, 0.926vh), 15px);
  --out: 2px 2px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 0 2px 0 var(--ink);
  --out3: 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), 3px 0 0 var(--ink);
  --grp: #12A99C; --grp-l: #A8F5E8; --grp-d: #0B6B63;
}

/* ─── la fenêtre : le vert-bleu du bouton, en dégradé, avec de fines rayures ─── */
#partyModal .pg-box {
  --mbx: calc(var(--u) * 2.6);
  /* (600 px au moins : sur une tablette ou un petit écran, « Copier le code » et « Copier le lien » tiennent côte à côte) */
  width: min(max(calc(var(--u) * 86), 600px), 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "list list" "code join" "amis amis" "foot foot";
  /* (stretch : les cartes blanches ont la même hauteur) */
  align-items: stretch; gap: calc(var(--u) * 1.6) calc(var(--u) * 1.8);
  padding: 0 var(--mbx) calc(var(--u) * 2.4);
  border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 2.2); color: #fff;
  box-shadow: inset 0 0 0 calc(var(--u) * 0.35) rgba(168, 245, 232, 0.45), calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--ink);
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(168, 245, 232, 0.35), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 calc(var(--u) * 1), transparent calc(var(--u) * 1) calc(var(--u) * 2)),
    linear-gradient(170deg, #19BFB1, var(--grp) 45%, var(--grp-d));
}
/* le bandeau du titre : l'icône du bouton, « TON GROUPE » blanc cerclé d'encre, combien vous êtes, ✕ */
#partyModal .pg-box > header {
  grid-area: head; display: flex; align-items: center; gap: calc(var(--u) * 1.2); min-width: 0;
  margin: 0 calc(-1 * var(--mbx)); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.4) calc(var(--u) * 1.1) var(--mbx);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 calc(var(--u) * 1), transparent calc(var(--u) * 1) calc(var(--u) * 2)), linear-gradient(#1FC9BA, #0E8C81);
  border-bottom: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.7) calc(var(--u) * 1.7) 0 0;
}
#partyModal .pg-ico { flex: none; display: grid; place-items: center; width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); min-width: 32px; min-height: 32px; box-sizing: border-box; border: calc(var(--u) * 0.35) solid var(--ink); border-radius: 50%; background: #fff; color: var(--grp-d); box-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); }
#partyModal .pg-ico svg { width: 64%; height: 64%; }
#partyModal .pg-box > header h2 { flex: 1; min-width: 0; margin: 0; padding: 0 calc(var(--u) * 0.4) calc(var(--u) * 0.3) 0; font: italic 800 calc(var(--u) * 4.8)/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; color: #fff; text-shadow: var(--out3), calc(var(--u) * 0.4) calc(var(--u) * 0.5) 0 var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#partyModal .pg-n { flex: none; padding: calc(var(--u) * 0.5) calc(var(--u) * 1.2) calc(var(--u) * 0.6); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 0.9); background: var(--ink); color: var(--grp-l); font: italic 800 max(15px, calc(var(--u) * 2.4))/1 var(--fc); letter-spacing: 1px; box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 rgba(0, 0, 0, 0.3); transform: rotate(-3deg); }
#partyModal .pg-box > header .icon-btn { width: max(40px, calc(var(--u) * 5.6)); height: max(40px, calc(var(--u) * 5.6)); border-width: max(3px, calc(var(--u) * 0.35)); border-radius: calc(var(--u) * 1.2); font-size: max(20px, calc(var(--u) * 2.8)); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); }

/* ─── les potes : une carte blanche chacun (sa balle, la couronne du chef, son nom), puis les places libres ─── */
#partyModal .party-list { grid-area: list; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); margin: 0; }
#partyModal .party-list .pl {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.5); min-width: 0; height: auto; box-sizing: border-box;
  padding: calc(var(--u) * 2) calc(var(--u) * 1) calc(var(--u) * 1.2); border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.6);
  background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); font: inherit; text-transform: none; white-space: normal;
}
#partyModal .party-list .pl.me { outline: calc(var(--u) * 0.4) solid var(--gold); outline-offset: calc(var(--u) * 0.25); }
#partyModal .pl-ball { position: relative; flex: none; display: grid; place-items: center; width: calc(var(--u) * 7.6); height: calc(var(--u) * 7.6); min-width: 40px; min-height: 40px; box-sizing: border-box; }
#partyModal .pl-ball img { display: block; width: 100%; height: 100%; box-sizing: border-box; border: calc(var(--u) * 0.4) solid var(--ink); border-radius: 50%; background: #E7E2D8; object-fit: cover; }
#partyModal .pl-ball .hs-crown { position: absolute; left: 50%; top: calc(var(--u) * -2.2); width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); min-width: 18px; min-height: 18px; transform: translateX(-50%) rotate(-8deg); }
#partyModal .party-list .pl b { max-width: 100%; padding: 0 2px 1px 0; font: italic 800 max(15px, calc(var(--u) * 2.3))/1.05 var(--fc); letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* (« Toi », « En partie » : une étiquette dans le coin, comme sur les cartes du lobby) */
#partyModal .party-list .pl small { position: absolute; left: calc(var(--u) * 0.8); top: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.3) calc(var(--u) * 0.8) calc(var(--u) * 0.4); border: calc(var(--u) * 0.25) solid var(--ink); border-radius: calc(var(--u) * 0.7); background: var(--gold); color: var(--ink); font: italic 800 max(12px, calc(var(--u) * 1.5))/1 var(--fc); letter-spacing: 0.6px; text-transform: uppercase; white-space: nowrap; box-shadow: 1.5px 1.5px 0 var(--ink); transform: rotate(-3deg); }
#partyModal .party-list .pl small:empty { display: none; }
#partyModal .party-list .pl.away small { background: #FFB547; }
#partyModal .party-list .pl.away .pl-ball img { filter: grayscale(1); opacity: 0.6; }
#partyModal .party-list .pl.away b { color: rgba(21, 21, 21, 0.55); }
/* (une place libre : en pointillés blancs sur le vert-bleu ; son « + » est dessiné, centré) */
#partyModal .party-list .pl.free { border-style: dashed; border-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.1); box-shadow: none; color: #fff; }
#partyModal .pl.free .pl-ball { border: calc(var(--u) * 0.35) dashed rgba(255, 255, 255, 0.85); border-radius: 50%; }
#partyModal .pl.free .pl-ball svg { width: 46%; height: 46%; overflow: visible; fill: #fff; stroke: var(--ink); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; filter: drop-shadow(1.5px 1.5px 0 var(--ink)); }
#partyModal .pl.free .pl-ball svg path { vector-effect: non-scaling-stroke; }
#partyModal .party-list .pl.free b { color: #fff; text-shadow: var(--out); }

/* ─── les cartes blanches : le code du groupe (et son lien), rejoindre celui d'un pote (et, avec un compte, tes amis) ─── */
#partyModal .pg-card { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); box-sizing: border-box; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6) calc(var(--u) * 1.6);
  border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.6); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); }
#partyModal .pg-code { grid-area: code; }
#partyModal .pg-join { grid-area: join; }
#partyModal .pg-card h3 { margin: 0; font: italic 800 max(14px, calc(var(--u) * 2.1))/1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; color: var(--grp-d); }
#partyModal .pg-row { display: flex; align-items: stretch; gap: calc(var(--u) * 1); min-width: 0; margin: 0; }
#partyModal .pg-card .hub-btn, #partyModal .pg-card .hub-go { margin: 0; }
/* le code, en grand : un appui le copie (« Copié ✓ » sur le bouton d'à côté, le code passe au vert) */
#partyModal .pg-big { flex: 1; min-width: 0; min-height: 44px; display: grid; place-items: center; box-sizing: border-box; padding: calc(var(--u) * 0.4) calc(var(--u) * 1);
  border: calc(var(--u) * 0.35) dashed var(--ink); border-radius: calc(var(--u) * 1.1); background: #E3FAF6; color: var(--ink); cursor: pointer;
  font: italic 800 max(26px, calc(var(--u) * 4.6))/1 var(--fc); letter-spacing: max(3px, calc(var(--u) * 0.7)); text-indent: max(3px, calc(var(--u) * 0.7)); text-transform: uppercase; transition: background-color 0.15s ease; }
#partyModal .pg-big:hover { background: #CDF5EE; }
#partyModal .pg-big.copied { background: #3DDC84; border-style: solid; }
/* (« Copier le code » : le bouton principal de la carte, au vert-bleu du groupe ; « Copié ✓ » en vert) */
#partyModal .hub-btn.pg-main { background: var(--grp); color: #fff; text-shadow: var(--out); }
#partyModal .hub-btn.pg-main:hover { background: #17BBAD; }
#partyModal .hub-btn.copied, #partyModal .hub-btn.pg-main.copied { background: #3DDC84; color: var(--ink); text-shadow: none; }
#partyModal .party-share { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1); margin: 0; }
#partyModal .party-share .hub-btn { flex: 1 1 auto; }
#partyModal .party-share input { flex: 1 1 100%; min-width: 0; height: 40px; box-sizing: border-box; padding: 0 calc(var(--u) * 1.2); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.1); background: #fff; color: var(--ink); font: 600 max(14px, calc(var(--u) * 1.7)) var(--fb); letter-spacing: 0; }
/* rejoindre : le champ du code (16 px au moins : un iPhone ne zoome pas dessus) et « Rejoindre », en or */
#partyModal .pg-join input { flex: 1; min-width: 0; width: 0; min-height: 44px; box-sizing: border-box; padding: 0 calc(var(--u) * 1.2); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.1); background: #fff; color: var(--ink);
  font: italic 800 max(18px, calc(var(--u) * 3))/1 var(--fc); letter-spacing: max(2px, calc(var(--u) * 0.5)); text-transform: uppercase; outline: none; }
#partyModal .pg-join input::placeholder { color: rgba(21, 21, 21, 0.3); }
#partyModal .pg-join input:focus { box-shadow: 0 0 0 3px var(--gold); }
#partyModal .pg-join .hub-go { flex: none; }
/* un refus : une pastille rouge sous le champ, qui secoue un peu */
#partyModal .pg-err { margin: 0; padding: calc(var(--u) * 0.7) calc(var(--u) * 1.2) calc(var(--u) * 0.8); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 1); background: #E5484D; color: #fff; font: 700 max(13px, calc(var(--u) * 1.8))/1.25 var(--fb); box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); }
#partyModal .pg-err.go { animation: pgNon 0.35s ease; }
@keyframes pgNon { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
/* « Quitter ton groupe pour rejoindre celui de X ? » : à la place du champ, le temps de répondre */
#partyModal .pg-ask { display: flex; flex-direction: column; gap: calc(var(--u) * 0.9); }
#partyModal .pg-ask p { margin: 0; font: italic 800 max(15px, calc(var(--u) * 2.2))/1.1 var(--fc); text-transform: uppercase; }
#partyModal .pg-ask .hub-go { flex: 1; }
/* le bas : qui choisit le mode, et « Quitter le groupe » */
#partyModal .pg-foot { grid-area: foot; display: flex; align-items: center; gap: calc(var(--u) * 1.6); min-width: 0; }
#partyModal .party-note { flex: 1; min-width: 0; margin: 0; font: 600 max(12px, calc(var(--u) * 1.75))/1.3 var(--fb); color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
#partyModal .party-quit { flex: none; margin: 0; background: #FFE3DF; }
#partyModal .party-quit:hover { background: #FFD3CC; }

/* ─── TES AMIS (js/br/amis.js remplit #partyAmis) ─── */
/* (un invité : une seule ligne, sur le vert-bleu — « Avec un compte, invite tes amis d'un appui ») */
#partyModal .party-amis { grid-area: amis; min-width: 0; margin: 0; }
#partyModal .party-amis .pa-note { font: 600 max(12px, calc(var(--u) * 1.7))/1.3 var(--fb); color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
/* (un compte : sa carte blanche, son titre comme celui des deux autres, « Tous mes amis › », et la liste qui défile dans la
   carte — contain: size : la hauteur de la rangée vient du code et de « Rejoindre », pas du nombre d'amis) */
#partyModal .pg-box:has(.pa-head) .party-amis { contain: size; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(var(--u) * 0.9); box-sizing: border-box;
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.2) calc(var(--u) * 1.2) calc(var(--u) * 1.6); border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.6);
  background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); }
#partyModal .pg-box:has(.pa-head) .party-amis .pa-note { color: rgba(21, 21, 21, 0.68); text-shadow: none; }
#partyModal .pa-head { flex: none; gap: calc(var(--u) * 0.8); min-width: 0; }
#partyModal .pa-head b { min-width: 0; font: italic 800 max(14px, calc(var(--u) * 2.1))/1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; color: var(--grp-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* « Tous mes amis › » : un vrai bouton (Js', 04/10 : « c'est censé être un bouton, pas un texte souligné »), comme
   « Copier le lien » à côté : carte claire, trait d'encre, ombre d'encre décalée, italique */
#partyModal .pa-head .ba-lien { flex: none; display: inline-flex; align-items: center; min-height: 0; box-sizing: border-box; padding: calc(var(--u) * 0.7) calc(var(--u) * 1.3) calc(var(--u) * 0.8);
  border: max(2px, calc(var(--u) * 0.3)) solid var(--ink); border-radius: calc(var(--u) * 0.9); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink);
  font: italic 800 max(13px, calc(var(--u) * 1.75))/1 var(--fc); letter-spacing: 0.6px; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease; }
#partyModal .pa-head .ba-lien:hover { transform: translate(-1px, -1px); background: #fff; box-shadow: calc(var(--u) * 0.3 + 1px) calc(var(--u) * 0.3 + 1px) 0 var(--ink); }
#partyModal .pa-head .ba-lien:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
#partyModal .pa-list { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 2px 6px 6px 2px; gap: calc(var(--u) * 1); }
#partyModal .pa-list .ba-row { box-shadow: 2px 2px 0 var(--ink); }

/* ─── avec un compte : trois cartes côte à côte — le code, rejoindre, tes amis ─── */
#partyModal .pg-box:has(.pa-head) { width: min(max(calc(var(--u) * 128), 860px), 100%); grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) minmax(0, 1.1fr); grid-template-areas: "head head head" "list list list" "code join amis" "foot foot foot"; }

/* ─── SUR ORDINATEUR ET TABLETTE (plus de 520 px de haut) : le grand code sur toute la largeur de sa carte — jamais à
   l'étroit, même « MWMWM » —, puis « Copier le code » et « Copier le lien » côte à côte ; au doigt, « Partager » (son
   icône) à côté du code. En face, le champ puis « Rejoindre », l'un sous l'autre : les deux cartes se répondent ─── */
@media not all and (max-height: 520px) {
  #partyModal .pg-code { flex-flow: row wrap; align-content: flex-start; }
  #partyModal .pg-code .pg-row, #partyModal .pg-code .party-share { display: contents; }
  #partyModal .pg-code h3 { flex: 1 1 100%; }
  #partyModal .pg-code .pg-big { order: 1; flex: 1 1 60%; min-height: max(48px, calc(var(--u) * 6.6)); }
  #partyModal .pg-code .pg-share { order: 2; flex: none; width: max(48px, calc(var(--u) * 6.6)); padding: 0; }
  #partyModal .pg-code .pg-share span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #partyModal .pg-code #partyCopyCode { order: 3; flex: 1 1 40%; }
  #partyModal .pg-code #partyCopy { order: 4; flex: 1 1 40%; }
  #partyModal .pg-code #partyLink { order: 5; }
  /* (« Copie impossible », plus long : il passe à la ligne plutôt que de déborder) */
  #partyModal .pg-code .hub-btn { min-height: max(44px, calc(var(--u) * 5.3)); white-space: normal; line-height: 1.05; text-align: center; }
  #partyModal .pg-join .pg-row { flex-direction: column; }
  #partyModal .pg-join input { width: 100%; flex: none; min-height: max(48px, calc(var(--u) * 6.6)); }
}

/* ─── LE TÉLÉPHONE EN PAYSAGE (et toute fenêtre de 520 px de haut ou moins) : trois colonnes, sans défilement ─── */
@media (max-height: 520px) {
  #partyModal { --u: 4px; }
  #partyModal .pg-box { --mbx: 12px; width: min(720px, 100%); grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head head" "list code join" "amis code join" "foot code join";
    grid-template-rows: auto auto auto 1fr; gap: 8px 10px; padding-bottom: 10px; border-width: 4px; border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(168, 245, 232, 0.45), 6px 6px 0 var(--ink); }
  #partyModal .pg-box > header { gap: 8px; padding: 4px 6px 4px var(--mbx); border-bottom-width: 3px; border-radius: 10px 10px 0 0; }
  #partyModal .pg-ico { width: 30px; height: 30px; min-width: 0; min-height: 0; border-width: 2.5px; box-shadow: 2px 2px 0 var(--ink); }
  #partyModal .pg-box > header h2 { font-size: 24px; text-shadow: var(--out), 2px 3px 0 var(--ink); }
  #partyModal .pg-n { font-size: 15px; padding: 2px 7px 3px; border-width: 2px; }
  #partyModal .pg-box > header .icon-btn { width: 36px; height: 36px; font-size: 18px; border-width: 3px; border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); }
  /* (les potes en colonne : une ligne chacun, la balle à gauche, le nom à droite) */
  #partyModal .party-list { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  #partyModal .party-list .pl { flex-direction: row; justify-content: flex-start; gap: 7px; min-height: 40px; padding: 3px 8px 3px 5px; border-width: 3px; border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); }
  #partyModal .party-list .pl.me { outline-width: 3px; outline-offset: 1px; }
  #partyModal .pl-ball { width: 32px; height: 32px; min-width: 0; min-height: 0; }
  #partyModal .pl-ball img { border-width: 2.5px; }
  #partyModal .pl-ball .hs-crown { width: 16px; height: 16px; min-width: 0; min-height: 0; top: -9px; }
  #partyModal .pl.free .pl-ball { border-width: 2px; }
  #partyModal .party-list .pl b { flex: 1; min-width: 0; font-size: 15px; text-align: left; }
  #partyModal .party-list .pl small { position: static; flex: none; padding: 1px 5px 2px; border-width: 2px; font-size: 12px; box-shadow: 1px 1px 0 var(--ink); transform: none; }
  #partyModal .pg-card { gap: 6px; padding: 6px 8px 8px; border-width: 3px; border-radius: 11px; box-shadow: 3px 3px 0 var(--ink); }
  #partyModal .pg-card h3 { font-size: 13px; }
  #partyModal .pg-code .pg-row { flex-direction: column; }
  #partyModal .pg-big { min-height: 44px; font-size: 28px; letter-spacing: 4px; text-indent: 4px; border-width: 2.5px; border-radius: 9px; }
  #partyModal .pg-join .pg-row { flex-direction: column; }
  #partyModal .pg-join input { width: 100%; flex: none; font-size: 20px; letter-spacing: 3px; border-width: 3px; border-radius: 10px; padding: 0 10px; }
  #partyModal .pg-join .hub-go { min-height: 44px; }
  #partyModal .party-share { flex-wrap: nowrap; gap: 6px; }
  #partyModal .party-share .hub-btn { flex: 1 1 auto; padding-left: 6px; padding-right: 6px; }
  /* (copie refusée par le navigateur : le lien en clair prend la place de « Copier le lien », pour le copier à la main) */
  #partyModal .party-share:has(> input:not([hidden])) #partyCopy { display: none; }
  #partyModal .party-share input { flex: 1 1 auto; height: 44px; font-size: 14px; }
  /* (« Partager » : son icône seule, à côté de « Copier le lien ») */
  #partyModal .party-share .pg-share { flex: none; width: 44px; padding: 0; }
  #partyModal .pg-share span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #partyModal .pg-err { padding: 4px 8px 5px; border-width: 2px; border-radius: 8px; font-size: 13px; line-height: 1.2; box-shadow: 2px 2px 0 var(--ink); }
  #partyModal .pg-ask { gap: 6px; }
  #partyModal .pg-ask p { font-size: 15px; }
  #partyModal .pg-ask .pg-row { flex-direction: row; }
  /* (au téléphone, la phrase du chef s'efface : la place va aux boutons ; « Quitter le groupe » sous les potes) */
  #partyModal .pg-foot { align-self: end; }
  #partyModal .party-note { display: none; }
  #partyModal .party-quit { flex: 1; }
  /* (un invité : la ligne « Avec un compte… » sous les potes, petite) */
  #partyModal .party-amis .pa-note { font-size: 12px; line-height: 1.25; }

  /* ─ avec un compte : les potes en une rangée au-dessus, puis les trois cartes — le code, rejoindre, tes amis ; « Quitter le
     groupe » au bout de la rangée des potes (la place lui est gardée quand il est là) ─ */
  #partyModal .pg-box:has(.pa-head) { width: min(760px, 100%); grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.3fr); grid-template-areas: "head head head" "list list list" "code join amis"; grid-template-rows: auto auto minmax(0, 1fr); }
  #partyModal .pg-box:has(.pa-head) .party-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #partyModal .pg-box:has(.pa-head):has(#partyQuit:not([hidden])) .party-list { padding-right: 104px; }
  #partyModal .pg-box:has(.pa-head) .pg-foot { grid-area: list; justify-self: end; align-self: center; z-index: 1; }
  #partyModal .pg-box:has(.pa-head) .party-quit { flex: none; width: 96px; min-height: 40px; padding: 2px 6px; font-size: 13px; line-height: 1; white-space: normal; text-align: center; }
  #partyModal .pg-box:has(.pa-head) .party-amis { gap: 5px; padding: 6px 4px 6px 8px; border-width: 3px; border-radius: 11px; box-shadow: 3px 3px 0 var(--ink); }
  #partyModal .pa-head b { font-size: 13px; }
  #partyModal .pa-head .ba-lien { min-height: 28px; font-size: 12px; }
  #partyModal .pa-list { padding: 1px 4px 4px 1px; gap: 6px; }
  /* (la ligne d'un ami, à l'étroit : son nom et ce qu'il fait — son @ est dans « Tous mes amis ») */
  #partyModal .pa-list .ba-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 6px; min-height: 46px; padding: 3px 4px 3px 4px; border-width: 2.5px; border-radius: 10px; }
  #partyModal .pa-list .ba-por { width: 38px; height: 38px; }
  #partyModal .pa-list .ba-por .ba-b { inset: 3px; width: 32px; height: 32px; }
  #partyModal .pa-list .ba-por .ba-c { width: 40px; height: 40px; }
  #partyModal .pa-list .ba-at { display: none; }
  #partyModal .pa-list .ba-nom { font-size: 15px; }
  #partyModal .pa-list .ba-etat > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #partyModal .pa-list .ba-act .hub-go-s, #partyModal .pa-list .ba-act .hub-btn { min-height: 40px; padding: 0 8px; font-size: 13px; }
}
/* (le plus bas — 340 px de haut et moins : tout se resserre de quelques pixels pour tenir sans défiler, avec trois potes et
   « Quitter le groupe » sous eux, ou avec les cartes des amis sous la rangée des potes) */
@media (max-height: 340px) {
  #partyModal .pg-box { gap: 6px 10px; padding-bottom: 8px; }
  #partyModal .pg-box > header { padding-top: 2px; padding-bottom: 2px; }
  #partyModal .pg-box > header h2 { font-size: 21px; }
  #partyModal .pg-box > header .icon-btn { width: 32px; height: 32px; }
  #partyModal .party-list { gap: 4px; }
  #partyModal .party-list .pl { min-height: 34px; padding-top: 1px; padding-bottom: 1px; }
  #partyModal .pl-ball { width: 28px; height: 28px; }
  #partyModal .pl-ball .hs-crown { width: 14px; height: 14px; top: -8px; }
  #partyModal .party-quit { min-height: 38px; }
  #partyModal .party-amis .pa-note { font-size: 11px; }
  #partyModal .pg-card { gap: 5px; padding-top: 5px; padding-bottom: 6px; }
  #partyModal .pg-big { min-height: 40px; }
  #partyModal .pg-card .hub-btn, #partyModal .pg-card .hub-go, #partyModal .pg-join input { min-height: 38px; }
  #partyModal .pg-box:has(.pa-head) .party-list .pl, #partyModal .pg-box:has(.pa-head) .party-quit { min-height: 36px; }
}

/* ─── LE BOUTON « GROUPE » : toujours là, en haut de l'entrée (Js', 03/10 : « Groupe 1/3 » même seul) — il répond au
   survol et à l'appui comme les autres boutons de la barre ─── */
.hub-grp { transition: transform 0.1s ease, background-color 0.15s ease; }
.hub-grp:hover { background: #17BBAD; transform: translate(-1px, -1px); }
.hub-grp:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
/* (un petit écran d'ordinateur — 1 150 px de large et moins — : au lobby, « Retour », la file, ton profil, « Groupe » et les
   outils avec leurs noms ne tiennent plus côte à côte ; ton profil garde son portrait, sans un bout de nom écrasé — ton nom
   est sur ta carte, juste en dessous) */
@media (max-width: 1150px) {
  .bd-hub[data-view="lobby"] .hub-me .hm-txt { display: none; }
}
/* (au téléphone le plus étroit — 667 px, sans encoche —, le bouton toujours là prend sa place dans la barre : ses écarts
   se resserrent un peu pour que tous les boutons tiennent, au lobby aussi — « Retour », la file, « 1/3 », les outils ;
   depuis la mise à jour de l'associé, « Amis » et « Classement » en plus) */
@media (max-height: 520px) and (max-width: 720px) {
  .bd-hub .hub-top { gap: 6px; }
  .bd-hub .hub-q b, .bd-hub .hub-q i { padding: 0 8px; }
  .bd-hub .hub-grp { padding: 0 8px; }
}
/* (jusqu'à 760 px de large — 667, 740 — : au lobby, « ← Retour » devient sa flèche) */
@media (max-height: 520px) and (max-width: 760px) {
  .bd-hub .hub-back { width: 44px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  .bd-hub .hub-back span { font-size: 22px; }
}
/* (640 px de large, un Android courant : au lobby, « Balles » s'en va — ta carte change déjà ta balle) */
@media (max-height: 520px) and (max-width: 660px) {
  .bd-hub[data-view="lobby"] #hubBalls { display: none; }
}
/* (les plus petits téléphones, 568 px : « Classement » s'en va de la barre — il reste sur l'onglet Ranked et sa plaque — ;
   au menu, ton profil garde son portrait, sans un bout de nom écrasé) */
@media (max-height: 520px) and (max-width: 600px) {
  .bd-hub #hubTop { display: none; }
  .bd-hub .hub-me .hm-txt { display: none; }
  .bd-hub .hub-me { padding: 0 4px; }
}
/* (au téléphone, la note de la battle royale dit seulement « Vous êtes trop » : Solo et Duo sont barrés juste à côté) */
@media (max-height: 520px) {
  #hubBrNote .hbn-x { display: none; }
}

/* ─── « VOUS ÊTES TROP » (Js', 03/10 : « faut pas que tu puisses mettre de la solo ou de la 1v1… et ça dit que vous êtes
   trop ») : un mode où le groupe joue ensemble sans y avoir de place est grisé, sa raison écrite — la carte 2 VS 2 à 3,
   Solo et Duo de la battle royale. (Le 1 VS 1 d'une room, depuis la mise à jour de l'associé, c'est chacun son duel : il
   reste ouvert, comme les onglets Standard et Ranked.) ─── */
.hub-seg button.off { cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  #partyModal .pg-err.go { animation: none; }
  .hub-grp, #partyModal .pg-big { transition: none; }
}