/* Chantier social (retour 11 de Bastien, 20 octobre 2026) : les Alliés. Bouton rond de la Cité, écran des Alliés (ivoire du socle, une
   bannière bleu électrique, un seul azur : « Défier un ami »), feuille d'invitation, résultat du raid amical (plaque des raids). Aucun
   backdrop-filter, aucun filtre sur #canvas. Écrit par src/ui/allies.js. */

/* le bouton Alliés de la Cité (cercle peint, nom dessous, pastille rouge chiffrée) est habillé par refonte-cite.css (chantier cite, 23 octobre 2026) ; ancien habillage en tuile bleue retiré. */

/* ---------- l'écran des Alliés ---------- */
.screen.panel.allies-screen { padding:0; overflow:hidden; display:flex; flex-direction:column; background:radial-gradient(120% 60% at 50% -10%, #FFFDF5 0%, var(--inv-ivoire) 55%, #EFE5C9 100%); color:var(--inv-encre); }
.allies-tete { flex:none; position:relative; z-index:2; display:flex; align-items:center; gap:8px; padding:calc(var(--safe-t) + 8px) calc(10px + var(--safe-r)) 6px calc(10px + var(--safe-l)); }
.allies-retour { width:48px; height:56px; border-radius:12px; background:var(--inv-ivoire); color:var(--inv-encre); box-shadow:var(--inv-ombre); border:1.5px solid var(--inv-bord); }
.allies-retour .picon { width:24px; color:var(--inv-encre); }
.allies-retour:active { transform:translateY(2px); background:var(--inv-ivoire-2); }
.allies-titres { min-width:0; display:flex; flex-direction:column; gap:2px; }
.allies-titre { margin:0; font:italic 900 32px/.95 var(--f-affiche); color:var(--inv-encre); letter-spacing:.01em; }
.allies-titre-sous { margin:0; font:700 13px/1.1 var(--f-lecture); color:var(--inv-encre-2); }
.allies-corps { flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; gap:10px;
  padding:4px calc(12px + var(--safe-r)) calc(16px + var(--safe-b)) calc(12px + var(--safe-l)); }

/* ta bannière : la plaque vive de l'écran, bleu électrique liseré d'or, l'insigne de ta ligue en héraut */
.allies-moi { flex:none; position:relative; display:flex; align-items:center; gap:12px; min-height:66px; box-sizing:border-box; padding:10px 14px 10px 12px; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg, #1F8BFF 0%, #0A5FD6 52%, #0A3E9C 100%); border:2px solid #E8B64C; color:#fff;
  box-shadow:0 4px 0 #A87A1E, 0 10px 22px rgba(8,30,80,.35), inset 0 2px 0 rgba(230,251,255,.6); }
.allies-moi::before { content:''; position:absolute; right:-30px; top:-40px; width:170px; height:170px; border-radius:50%; background:radial-gradient(closest-side, rgba(166,233,255,.45), rgba(166,233,255,0)); pointer-events:none; }
.allies-moi-insigne { flex:none; width:40px; height:48px; position:relative; filter:drop-shadow(0 3px 0 rgba(0,20,60,.45)); }
.allies-moi-insigne svg { width:100%; height:100%; display:block; }
.allies-moi-txt { min-width:0; position:relative; display:flex; flex-direction:column; gap:4px; }
.allies-moi-nom { font:italic 900 25px/.95 var(--f-affiche); letter-spacing:.01em; text-shadow:0 2px 0 rgba(0,30,90,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.allies-moi-txt small { font:700 14px/1.1 var(--f-lecture); color:#DDF3FF; }
.allies-moi-txt .allies-code { position:absolute; right:0; top:0; font:800 11px/1 var(--f-lecture); letter-spacing:.06em; color:#F6D37E; opacity:.9; }
.allies-moi-txt { flex:1; }

.allies-inviter { flex:none; width:100%; min-height:66px; margin:2px 0 4px; justify-content:center; gap:12px; }
.allies-inviter-ico { flex:none; width:30px; height:30px; display:block; }
.allies-inviter-ico svg { width:100%; height:100%; display:block; }
.allies-inviter .command-copy strong { font-size:28px; }
.allies-inviter .command-copy small { font:700 13px/1.1 var(--f-lecture); }
.allies-copie { margin:-4px 0 0; padding:8px 12px; border-radius:10px; background:#E6F6E9; border:1.5px solid #7CC48A; color:#1D5A2A; font:800 14px/1.2 var(--f-lecture); text-align:center; }
.allies-copie[hidden], .allies-lien[hidden] { display:none; }
.allies-lien { display:flex; flex-direction:column; gap:6px; padding:8px 10px; border-radius:12px; background:#fff; border:1.5px solid var(--inv-bord); }
.allies-lien label { font:700 13px/1.1 var(--f-lecture); color:var(--inv-encre-2); }
.allies-lien input, .allies-coller-l input { width:100%; min-width:0; min-height:44px; box-sizing:border-box; padding:0 10px; border-radius:10px; border:1.5px solid var(--inv-bord); background:#FFFDF5; color:var(--inv-encre); font:600 14px/1 var(--f-lecture); }

.allies-sec { flex:none; display:flex; align-items:baseline; justify-content:space-between; margin:6px 2px 0; font:900 13px/1 var(--f-lecture); letter-spacing:.05em; text-transform:uppercase; color:#8A5A12; }
.allies-sec small { font:700 13px/1 var(--f-lecture); letter-spacing:0; text-transform:none; color:var(--inv-encre-2); }
.allies-liste { flex:none; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.allies-liste[hidden], .allies-vide[hidden] { display:none; }
.al-ligne { display:flex; align-items:center; gap:8px; min-height:68px; box-sizing:border-box; padding:6px 8px 6px 6px; border-radius:14px; background:#fff; border:1.5px solid var(--inv-bord); box-shadow:0 2px 0 #E4D6B0; cursor:pointer; }
.al-ligne.podium .al-rang { color:#B8821C; }
.al-ligne.moi { background:#EAF4FF; border:2px solid #2F86E6; box-shadow:0 2px 0 #B6D3F5; cursor:default; }
.al-ligne.ouvert { border-radius:14px 14px 4px 4px; border-color:#E8B64C; }
.al-ligne.surligne { animation:alSurligne 1.6s var(--courbe) 2; }
@keyframes alSurligne { 0%, 100% { box-shadow:0 2px 0 #E4D6B0; } 40% { box-shadow:0 0 0 4px rgba(232,182,76,.75), 0 2px 0 #E4D6B0; } }
.al-rang { flex:none; width:22px; text-align:center; font:italic 900 22px/1 var(--f-affiche); color:var(--inv-encre-2); }
.al-ligne.moi .al-rang { color:#0B4FB3; }
.al-insigne { flex:none; width:38px; height:46px; filter:drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
.al-insigne svg { width:100%; height:100%; display:block; }
.al-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.al-nom { display:flex; align-items:baseline; gap:6px; min-width:0; }
.al-nom b { font:800 17px/1.05 var(--f-lecture); color:var(--inv-encre); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.al-nom small { flex:none; padding:1px 6px; border-radius:6px; background:#2F86E6; color:#fff; font:800 11px/1.3 var(--f-lecture); }
.al-sous { font:700 12px/1.15 var(--f-lecture); color:var(--inv-encre-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.al-res > span { white-space:nowrap; }
.al-res { display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; font:700 12.5px/1.15 var(--f-lecture); color:var(--inv-encre); }
.al-r-moi.vide { color:#8A5A12; }
.al-r-lui { color:#46566F; }
.al-duel { font-style:normal; padding:1px 7px; border-radius:7px; font:900 11.5px/1.35 var(--f-lecture); }
.al-duel.tu { background:#DDF5E2; color:#1D6A30; border:1px solid #7CC48A; }
.al-duel.lui { background:#FFE7C2; color:#8A4A08; border:1px solid #E8B64C; }
.al-attaque { flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; width:84px; min-height:56px; margin:0; padding:4px 2px; box-sizing:border-box; border-radius:12px;
  background:linear-gradient(180deg, #FFD976 0%, #E8B64C 60%, #D6A43A 100%); border:1.5px solid #A87A1E; color:#2A1E08; box-shadow:0 4px 0 #A87A1E, inset 0 1.5px 0 rgba(255,246,214,.9); cursor:pointer; }
.al-attaque .picon { width:20px; color:#2A1E08; }
.al-attaque small { font:800 10.5px/1 var(--f-lecture); color:#5A3E08; }
.al-attaque span:not(.picon) { font:italic 900 17px/1 var(--f-action); }
.al-attaque:active { transform:translateY(3px); box-shadow:0 1px 0 #A87A1E, inset 0 1.5px 0 rgba(255,246,214,.9); }
.al-tiroir { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:-4px 0 0; padding:8px; border-radius:0 0 14px 14px; background:#FFF7DE; border:1.5px solid #E8B64C; border-top:0; }
.al-act { display:flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; border-radius:10px; font:800 14px/1 var(--f-lecture); cursor:pointer; }
.al-act svg { width:18px; height:18px; display:block; }
.al-act.envoyer { flex:1; background:#fff; border:1.5px solid #2F86E6; color:#0B4FB3; justify-content:center; }
.al-act.envoyer { flex-basis:100%; }
.al-act.retirer { min-height:40px; padding:0 4px; background:transparent; border:0; color:var(--inv-encre-2); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.al-act.retirer.confirme { padding:0 12px; background:#FFE3E5; border:1.5px solid var(--inv-rouge); color:var(--inv-rouge-sombre); text-decoration:none; }
.al-date { flex:1; min-width:0; font:600 12px/1.2 var(--f-lecture); color:var(--inv-encre-2); }
.al-chev { flex:none; width:7px; height:7px; margin:0 0 3px 2px; border-right:2.2px solid #8A93A5; border-bottom:2.2px solid #8A93A5; transform:rotate(45deg); }
.al-chev.haut { margin:3px 0 0 2px; transform:rotate(-135deg); }

.allies-vide { padding:14px; border-radius:14px; background:#fff; border:1.5px dashed #D8C9A3; }
.allies-vide p { margin:0; font:600 14.5px/1.35 var(--f-lecture); color:var(--inv-encre-2); }
.allies-vide b { display:block; margin-bottom:4px; font:italic 900 22px/1 var(--f-affiche); color:var(--inv-encre); }
.allies-coller { border-radius:12px; background:rgba(255,255,255,.6); border:1.5px solid var(--inv-bord); }
.allies-coller > summary { min-height:44px; display:flex; align-items:center; padding:0 12px; font:800 14px/1 var(--f-lecture); color:#0B4FB3; cursor:pointer; list-style:none; }
.allies-coller > summary::-webkit-details-marker { display:none; }
.allies-coller > summary::after { content:''; width:8px; height:8px; margin:-3px 2px 0 auto; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(45deg); }
.allies-coller[open] > summary::after { margin-top:4px; transform:rotate(-135deg); }
.allies-coller-l { display:flex; gap:6px; padding:0 10px 10px; }
.allies-coller-ok { flex:none; min-height:44px; padding:0 14px; border-radius:10px; background:#fff; border:1.5px solid #2F86E6; color:#0B4FB3; font:800 14px/1 var(--f-lecture); }
.allies-coller-msg { margin:0; padding:0 12px 10px; font:700 13px/1.2 var(--f-lecture); color:var(--inv-rouge-sombre); }
.allies-coller-msg[hidden] { display:none; }
.allies-note { margin:2px 2px 0; font:600 12px/1.35 var(--f-lecture); color:var(--inv-encre-2); }

/* la feuille d'invitation : un lien vient d'être ouvert */
.allies-invit { position:absolute; inset:0; z-index:5; display:flex; align-items:flex-end; }
.allies-invit[hidden] { display:none; }
.allies-invit-voile { position:absolute; inset:0; background:rgba(6,16,30,.62); }
.allies-invit-carte { position:relative; width:100%; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 18px calc(18px + var(--safe-b)); border-radius:24px 24px 0 0;
  background:var(--inv-ivoire); border-top:3px solid #E8B64C; box-shadow:0 -10px 30px rgba(0,8,24,.45); animation:depuisBas 260ms var(--courbe) both; }
.allies-invit-bandeau { position:relative; align-self:stretch; display:flex; flex-direction:column; align-items:center; gap:6px; margin:0 -18px; padding:56px 18px 16px; border-radius:21px 21px 0 0;
  background:linear-gradient(180deg, #2E9BFF 0%, #0A5FD6 70%, #0A4AB8 100%); box-shadow:inset 0 -3px 0 rgba(0,40,110,.35); }
.allies-invit-insigne { position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:76px; height:92px; filter:drop-shadow(0 4px 0 rgba(0,20,60,.45)); }
.allies-invit-insigne svg { width:100%; height:100%; display:block; }
.allies-invit-titre { margin:0; text-align:center; font:italic 900 30px/1 var(--f-affiche); color:#fff; text-shadow:0 2px 0 rgba(0,30,90,.6); overflow-wrap:anywhere; }
.allies-invit-sous { margin:0; text-align:center; font:700 14px/1.2 var(--f-lecture); color:#DDF3FF; }
.allies-invit-defi { margin:0; max-width:320px; text-align:center; font:600 15px/1.35 var(--f-lecture); color:var(--inv-encre); }
.allies-invit-defi b { color:#B8821C; }
.allies-invit-ok { width:100%; min-height:62px; margin-top:4px; justify-content:center; }
.allies-invit-ok .command-copy strong { font-size:26px; }
.allies-invit-non { min-height:44px; font:800 15px/1 var(--f-lecture); color:var(--inv-encre-2); }

/* ---------- le résultat du raid amical : la plaque des raids, trois commandes au pied ---------- */
.screen.raid-outcome.allie-outcome .raid-pied { grid-template-columns:minmax(0, 1fr) 62px 62px; grid-template-areas:"main rejouer retour"; }
.screen.raid-outcome.allie-outcome .raid-pied > #allie-result-envoyer { grid-area:main; }
.screen.raid-outcome.allie-outcome .raid-pied > #allie-result-rejouer { grid-area:rejouer; }
.screen.raid-outcome.allie-outcome .raid-pied > #allie-result-retour { grid-area:retour; }
.allie-envoyer { justify-content:center; }
.allie-envoyer-ico { flex:none; width:24px; height:24px; display:block; }
.allie-envoyer-ico svg { width:100%; height:100%; display:block; }
.screen.allie-outcome .raid-pied > .menu-command.primary.allie-envoyer strong { font-size:28px; white-space:nowrap; }
.screen.allie-outcome .raid-pied > .menu-command.primary.allie-envoyer small { font:700 12px/1 var(--f-lecture); }
.allie-record { margin:0; align-self:center; padding:4px 14px; border-radius:999px; background:linear-gradient(180deg, #FFD976, #E8B64C); color:#2A1E08; border:1.5px solid #A87A1E; font:italic 900 20px/1.1 var(--f-affiche); box-shadow:0 3px 0 #A87A1E; }
.allie-record[hidden] { display:none; }
.allie-duel { display:grid; grid-template-columns:1fr 1fr; gap:8px; position:relative; }
.allie-duel .ar-duel-l { display:flex; flex-direction:column; gap:3px; padding:8px 10px; border-radius:12px; background:var(--sm-blanc, #fff); border:1.5px solid var(--sm-bord, #D8C9A3); }
.allie-duel small { font:700 12px/1.15 var(--f-lecture); color:var(--sm-ink2, #46566F); }
.allie-duel b { font:italic 900 22px/1 var(--f-affiche); color:var(--sm-ink, #12233F); }
.allie-duel .al-duel { grid-column:1 / -1; justify-self:center; }
.allie-rien { margin:0; text-align:center; font:600 13px/1.3 var(--f-lecture); color:var(--sm-ink2, #46566F); }
.al-puiss { display:inline-flex; align-items:center; gap:2px; margin-left:6px; color:var(--inv-encre); font-weight:800; }
.al-puiss .picon { width:13px; color:#B8821C; }
.allies-etapes { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.allies-etapes li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:linear-gradient(90deg, #EAF4FF, #fff); border:1.5px solid #B6D3F5; }
.allies-etapes li > span:last-child { display:flex; flex-direction:column; gap:2px; min-width:0; }
.allies-etapes b { display:block; margin:0; font:800 15px/1.1 var(--f-lecture); color:var(--inv-encre); }
.allies-etapes small { font:600 12.5px/1.2 var(--f-lecture); color:var(--inv-encre-2); }
.allies-etape-n { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(180deg, #2E9BFF, #0752C4); color:#fff; border:2px solid #E8B64C; font:italic 900 17px/1 var(--f-affiche); box-shadow:0 2px 0 #003881; }
/* petits écrans (360 × 640) : la bannière et l'appel se resserrent pour que le classement commence au premier écran */
@media (max-height:700px) {
  .allies-tete { padding-top:calc(var(--safe-t) + 6px); padding-bottom:4px; }
  .allies-retour { height:48px; }
  .allies-titre { font-size:28px; }
  .allies-corps { gap:8px; }
  .allies-moi { min-height:76px; padding:8px 12px 8px 10px; }
  .allies-moi-insigne { width:46px; height:56px; }
  .allies-moi-nom { font-size:25px; }
  .allies-moi-txt small { font-size:13px; }
  .allies-inviter { min-height:56px; }
  .allies-inviter .command-copy strong { font-size:25px; }
  .al-ligne { min-height:60px; }
}

/* invitation : le chrono à battre au centre, « Ajouter seulement » en second */
.allies-invit-cible[hidden] { display:none; }
.allies-invit-cible { margin:4px 0 0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.allies-invit-cible b { font:italic 900 52px/1 var(--f-affiche); color:#B8821C; text-shadow:0 2px 0 rgba(120,80,10,.25); }
.allies-invit-cible small { font:700 14px/1.2 var(--f-lecture); color:var(--inv-encre-2); text-align:center; }
.allies-invit-seul[hidden] { display:none; }
.allies-invit-seul { min-height:46px; width:100%; border-radius:12px; background:#fff; border:1.5px solid #2F86E6; color:#0B4FB3; font:800 15px/1 var(--f-lecture); }

/* résultat du raid amical : le partage sur toute la largeur, Rejouer et Alliés dessous */
.screen.raid-outcome.allie-outcome .raid-pied { grid-template-columns:1fr 1fr; grid-template-areas:"main main" "rejouer retour"; }
.screen.raid-outcome.allie-outcome .raid-pied > .raid-cite { flex-direction:row; gap:8px; min-height:46px; }
.screen.raid-outcome.allie-outcome .raid-pied > .raid-cite small { font-size:14px; }
.ar-duel-seul { grid-column:1 / -1; margin:0; padding:10px 12px; border-radius:12px; text-align:center; background:#FFF3D6; border:1.5px solid #E8B64C; font:800 15px/1.25 var(--f-lecture); color:#5A3E08; }

.allies-sec[hidden] { display:none; }
.al-attaque.relever small { font-size:11.5px; }