/* Arcmarch, Invasion I2 (13 octobre 2026) : l'écran du rival et le résultat du raid. Direction du pilote V2 (rapport
   docs/rapports/2026-10-13/pilote_invasion) : l'image est le sujet, des pastilles ivoire posées dessus, UN seul azur (Attaquer),
   l'ennemi en rouge. Aucun filter ni backdrop-filter sur #canvas : la teinte rouge est posée sur des éléments DOM de l'écran.
   Jetons : assets/sources/ui/tokens.css. Les médias s'adaptent APRÈS la règle de base (pas de spécificité ajoutée). */
:root {
  --inv-ivoire:#FBF7EC; --inv-ivoire-2:#F1E8CF; --inv-bord:#D8C9A3; --inv-encre:#12233F; --inv-encre-2:#46566F;
  --inv-rouge:#D1242E; --inv-rouge-sombre:#8E1520; --inv-rouge-clair:#FF8A8F;
  --inv-ombre:0 3px 0 #BFAE84, 0 8px 18px rgba(8,20,48,.3);
}
/* la brique de pierre : un pictogramme dessiné (aucune image de plus dans le paquet) */
.rival-brique { flex:none; width:26px; height:20px; border-radius:3px; background:
  linear-gradient(90deg, transparent 0 48%, #8E99A8 48% 52%, transparent 52%) 0 0 / 100% 50% no-repeat,
  linear-gradient(90deg, transparent 0 23%, #8E99A8 23% 27%, transparent 27% 73%, #8E99A8 73% 77%, transparent 77%) 0 100% / 100% 50% no-repeat,
  linear-gradient(180deg, #C7CFDA 0 46%, #8E99A8 46% 54%, #C7CFDA 54%); box-shadow:inset 0 0 0 1.5px #6E7A8A; }

/* ---------- résultat du raid : voir le bloc « résultat du raid, vue du lot 3 » en fin de feuille ---------- */

/* ======================================================================================================================
   Invasion I3 (13 octobre 2026, contrat docs/rapports/2026-10-13/socle_visuel/CONTRAT_I3.md) : la Cité de l'Invasion.
   Valeurs et gabarits du pilote v2 (docs/rapports/2026-10-13/socle_visuel/pilote/socle.css) : pastilles ivoire posées sur
   la peinture, UN seul azur par écran (Attaquer, ou Vengeance dans le journal), l'ennemi et l'alerte en rouge. Les
   positions sur la Cité viennent de src/cite/invasion-positions.js, projetées par main.js (jamais écrites ici).
   Aucun filter ni backdrop-filter sur #canvas : les drop-shadow ne touchent que des boutons DOM. */
:root {
  --inv-chip:rgba(251,247,236,.96); --inv-chip-bord:1.5px solid var(--inv-bord); --inv-chip-ombre:0 3px 0 #BFAE84, 0 6px 14px rgba(8,20,48,.28);
  --inv-bar-h:44px;
}

/* ---------- barre haute : UNE rangée de 44 points (la tête d'accueil se retire) ---------- */
.screen.home.invasion .home-head { display:none; }
.inv-barre { position:absolute; left:0; right:0; top:0; z-index:2; box-sizing:border-box; display:flex; gap:5px; align-items:stretch;
  padding:calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l)); height:calc(var(--inv-bar-h) + 8px + var(--safe-t)); pointer-events:none; }
.inv-barre > * { pointer-events:auto; }
.inv-chip { position:relative; display:flex; align-items:center; gap:5px; min-width:0; height:var(--inv-bar-h); padding:0 8px; border-radius:12px;
  background:var(--inv-chip); color:var(--inv-encre); border:var(--inv-chip-bord); box-shadow:var(--inv-chip-ombre); text-align:left; transition:transform var(--t-appui) var(--courbe); }
.inv-chip:active { transform:translateY(2px); box-shadow:0 1px 0 #BFAE84, 0 3px 8px rgba(8,20,48,.28); }
.inv-chip:focus-visible { outline:3px solid var(--azur); outline-offset:2px; }
.inv-chip > .picon { width:24px; }
.inv-chip .rival-brique { width:22px; height:17px; }
.inv-num { min-width:0; font:italic 900 21px/1 var(--f-titre); letter-spacing:.01em; white-space:nowrap; overflow:hidden; color:var(--inv-encre); }
.inv-chip.inv-ligue { flex:none; width:44px; padding:0; justify-content:center; }
.inv-insigne { display:block; width:30px; height:36px; }
.inv-insigne svg { display:block; width:100%; height:100%; }
.inv-chip.inv-or { flex:1.2 1 0; }
.inv-chip.inv-pierre { flex:1 1 0; padding-bottom:3px; }
.inv-chip.inv-gemmes { flex:none; width:86px; }
.inv-or-copy { display:flex; flex:1; min-width:0; flex-direction:column; justify-content:center; gap:2px; }
.inv-or-montant { display:flex; align-items:center; min-width:0; gap:3px; }
.inv-or-montant .inv-num { font-size:19px; }
.inv-or-montant .inv-abri { width:10px; flex:none; color:#8A5A12; }
/* Les deux monnaies courantes ; la protection se lit sur l'or (retour 2, bloc en fin de feuille). La pierre se lit dans ses lieux de dépense. */
#stage .inv-barre { gap:4px; padding-left:calc(8px + var(--safe-l)); padding-right:calc(8px + var(--safe-r)); }
#stage .inv-barre .inv-chip { gap:3px; padding:0 5px; box-shadow:0 2px 0 #BFAE84, 0 4px 8px rgba(8,20,48,.16); }
#stage .inv-barre .inv-ligue { width:44px; padding:0; }
#stage .inv-barre .inv-or { flex:1 1 0; }
#stage .inv-barre .inv-gemmes { flex:0 1 auto; width:auto; min-width:68px; }
#stage .inv-barre .inv-chip > .picon { width:22px; }
#stage .inv-barre .inv-num { font-size:19px; }
#stage .inv-barre .inv-plus { width:16px; height:16px; font-size:15px; }
.inv-jauge { position:absolute; left:8px; right:8px; bottom:4px; height:3px; border-radius:2px; background:#DDD2B5; overflow:hidden; }
.inv-jauge i { display:block; height:100%; width:0; background:linear-gradient(90deg, #7C8FB8, #4F6598); transition:width var(--t-gain) var(--courbe); }
.inv-plus { flex:none; width:20px; height:20px; margin-left:auto; border-radius:6px; display:grid; place-items:center; font:900 17px/1 var(--f-texte); color:#fff;
  background:linear-gradient(var(--azur-haut), var(--azur)); box-shadow:0 2px 0 var(--azur-tranche); }

/* ---------- posé sur la Cité : marque d'un pillage (les attaques subies sont une pastille du bas, plus bas) ---------- */
.screen.home > .inv-sur { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.inv-sur > * { pointer-events:auto; position:absolute; left:0; top:0; }
/* LES ATTAQUES SUBIES (lot 2, 18 octobre 2026) : une pastille de 44 points posée DANS la pile du bas de l'accueil, juste au-dessus du bouton
   Attaquer (jamais plantée sur la peinture : plus de bannière ni de lieu). Rouge : un pillage attend sa vengeance ; bleue : une attaque repoussée
   est à venger ; ivoire : l'historique seul. Un toucher ouvre le journal. */
.screen.home .battle-row { flex-direction:column; align-items:stretch; }
.screen.home .battle-row > #home-battle { flex:none; }
.inv-attaques { display:flex; justify-content:center; margin:0 0 8px; }
.inv-attaques[hidden] { display:none; }
.inv-attaque { display:inline-flex; align-items:center; gap:8px; max-width:100%; min-height:44px; padding:0 14px 0 12px; box-sizing:border-box; border:2px solid #fff; border-radius:22px; color:#fff; cursor:pointer;
  font:800 14px/1.1 var(--f-lecture); white-space:nowrap; text-shadow:0 1px 0 rgba(60,0,10,.45);
  background:linear-gradient(180deg, #F0505A, var(--inv-rouge) 55%, #B01A24); box-shadow:0 3px 0 var(--inv-rouge-sombre), 0 6px 12px rgba(10,16,30,.45);
  transition:transform var(--t-appui) var(--courbe), box-shadow var(--t-appui) var(--courbe); }
.inv-attaque:active { transform:translateY(2px); box-shadow:0 1px 0 var(--inv-rouge-sombre), 0 3px 8px rgba(10,16,30,.4); }
.inv-attaque:focus-visible { outline:3px solid var(--inv-encre); outline-offset:2px; }
.inv-attaque.repoussee { background:linear-gradient(180deg, #4FB6FF, var(--azur) 55%, var(--azur-appui)); box-shadow:0 3px 0 var(--azur-tranche), 0 6px 12px rgba(10,16,30,.45); text-shadow:0 1px 0 rgba(0,30,90,.5); }
.inv-attaque.tenue { background:var(--inv-ivoire); color:var(--inv-encre); border-color:var(--inv-bord); text-shadow:none; box-shadow:0 3px 0 #BFAE84, 0 6px 12px rgba(10,16,30,.35); }
.inv-attaque-ico { width:20px; color:currentColor; }
.inv-attaque-txt { min-width:0; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inv-attaque-txt b { font-weight:900; }
.inv-attaque-txt small { display:inline; font:800 14px/1.1 var(--f-lecture); color:#FFE9A8; }
.inv-attaque-txt small::before { content:' · '; color:rgba(255,255,255,.8); white-space:pre; }
.inv-attaque.repoussee .inv-attaque-txt small { color:#fff; }
.inv-attaque-chev { flex:none; width:8px; height:8px; margin:0 3px 0 2px; border-top:2.5px solid currentColor; border-right:2.5px solid currentColor; transform:rotate(45deg); }
/* écran court : la pastille se resserre contre le bouton, se range à droite et perd son icône pour ne pas recouvrir le repère de la Trésorerie (qui descend vers elle quand la plaque monte) */
@media (max-height:700px) { .inv-attaques { margin-bottom:2px; justify-content:flex-end; } .inv-attaque-ico { display:none; } }
/* la commande de réparation d'un pillage (19 octobre 2026) : le dégât se lit sur la peinture (suie, fumée, braises, débris :
   src/cite/vivante.js) ; ici, une seule commande compacte au pied de la Trésorerie, marteau et « Réparer », cible de 44 points
   de haut (src/cite/invasion-positions.js), sans fumée de feuille de style par-dessus la peinture. */
.inv-degats { display:flex; flex-direction:column; align-items:center; justify-content:center; width:max-content; min-width:88px; height:44px; transform:translate(var(--x), var(--y)) translate(-50%, -100%); }
.inv-degats-lbl { position:relative; height:26px; padding:0 10px 0 8px; border-radius:9px; display:flex; align-items:center; gap:5px; background:var(--inv-rouge); color:#fff; font:800 12.5px/1 var(--f-texte); white-space:nowrap;
  box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.4); }
/* une pointe vers la Trésorerie : la commande est rattachée au bâtiment touché */
.inv-degats-lbl::before { content:''; position:absolute; left:50%; top:-8px; width:0; height:0; margin-left:-6px; border:6px solid transparent; border-top:0; border-bottom:8px solid #fff; }
.inv-degats-lbl::after { content:''; position:absolute; left:50%; top:-5px; width:0; height:0; margin-left:-4px; border:4px solid transparent; border-top:0; border-bottom:6px solid var(--inv-rouge); }
.inv-degats-lbl .picon { width:15px; height:15px; flex:none; color:#fff; }
.inv-degats:focus-visible .inv-degats-lbl { outline:3px solid #fff; outline-offset:2px; }
/* hud-cite2 : posé au-dessus de la Trésorerie (cadre court, hud.js placeInvasion), la flèche pointe vers le bas, sur elle */
.inv-degats.dessus .inv-degats-lbl::before { top:auto; bottom:-8px; border-bottom:0; border-top:8px solid #fff; }
.inv-degats.dessus .inv-degats-lbl::after { top:auto; bottom:-5px; border-bottom:0; border-top:6px solid var(--inv-rouge); }

/* ---------- gros bouton Attaquer de 76 points, au-dessus de la barre basse (sa logique est celle d'I2) ---------- */
.screen.home.invasion .battle-row { bottom:calc(var(--nav-h) + 12px); }
.screen.home.invasion #home-battle { min-height:76px; padding:8px 12px; gap:14px; }
.screen.home.invasion #home-battle > .picon { width:40px; }
.screen.home.invasion #home-battle .battle-copy { align-items:flex-start; gap:3px; }
.screen.home.invasion #home-battle-main { font-size:42px; line-height:1; }
.screen.home.invasion #home-battle-sub { display:block; font:700 14px/1.2 var(--f-texte); color:var(--azur-clair); }
.screen.home.invasion::after { height:calc(var(--nav-h) + 150px); }
/* la Cité se tait sous le journal, comme sous le menu Attaquer */
.screen.home:has(> #inv-journal:not([hidden])) :is(#camp-chips, .home-rail, .inv-sur, .inv-barre, .battle-row) { visibility:hidden; }

/* ---------- journal des attaques : feuille basse ---------- */
.inv-journal { position:absolute; inset:0; z-index:12; display:flex; flex-direction:column; justify-content:flex-end; color:var(--inv-encre); }
.inv-voile { position:absolute; inset:0; background:rgba(6,16,30,.45); }
.inv-feuille { position:relative; display:flex; flex-direction:column; max-height:72%; border-radius:22px 22px 0 0; background:var(--inv-ivoire); box-shadow:0 -6px 24px rgba(8,20,48,.4);
  padding-bottom:calc(var(--nav-h) - var(--barre-h) - 6px); }
.inv-f-tete { display:flex; align-items:center; gap:8px; padding:10px 10px 8px 16px; border-bottom:1.5px solid var(--inv-bord); }
.inv-f-titres { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.inv-f-tete h2 { margin:0; font:italic 900 24px/1 var(--f-titre); color:var(--inv-encre); }
.inv-f-sous { font:600 13px/1.2 var(--f-texte); color:var(--inv-encre-2); }
.inv-f-x { flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; color:var(--inv-encre-2); }
.inv-f-x .picon { width:20px; }
.inv-f-x:active { background:var(--inv-ivoire-2); }
.inv-f-x:focus-visible, .inv-venger:focus-visible { outline:3px solid var(--azur); outline-offset:2px; }
.inv-f-liste { list-style:none; margin:0; overflow:auto; padding:6px 10px 10px; display:flex; flex-direction:column; gap:6px; -webkit-overflow-scrolling:touch; }
.inv-f-vide { margin:0; padding:18px 16px 24px; font:600 15px/1.3 var(--f-texte); color:var(--inv-encre-2); text-align:center; }
.inv-att { display:flex; align-items:center; gap:10px; min-height:62px; padding:6px 8px 6px 10px; border-radius:14px; background:#fff; border:1.5px solid var(--inv-bord); }
.inv-att.pillee { border-left:5px solid var(--inv-rouge); }
.inv-att.tenue { border-left:5px solid #4F9C3A; }
.inv-att .inv-emb { width:36px; height:42px; flex:none; }
.inv-att .inv-emb svg { width:100%; height:100%; display:block; }
.inv-att .inv-a-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.inv-att .inv-a-nom { font:800 17px/1 'Grenze Gotisch', var(--f-titre); color:var(--inv-encre); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-att .inv-a-quoi { font:600 13px/1.2 var(--f-texte); color:var(--inv-encre-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-att.pillee .inv-a-quoi b { color:var(--inv-rouge-sombre); }
.inv-att .inv-a-age { font:600 11.5px/1.15 var(--f-texte); color:#8A5A12; }
.inv-venger { flex:none; height:44px; padding:0 14px; border-radius:12px; color:#fff; background:linear-gradient(to bottom, var(--azur-haut), var(--azur) 55%, var(--azur-appui));
  box-shadow:0 3px 0 var(--azur-tranche); font:italic 900 19px/1 var(--f-titre); letter-spacing:.02em; }
.inv-venger:active { transform:translateY(2px); box-shadow:0 1px 0 var(--azur-tranche); }
.inv-tenu { flex:none; min-width:58px; height:44px; padding:0 8px; display:grid; place-items:center; color:#2E6B22; font:800 13px/1.1 var(--f-texte); text-align:center; }
.inv-tenu.passee { color:var(--inv-encre-2); }

/* ---------- fiche de bâtiment : prix en pierre (dès le niveau 4) et l'effet de défense du niveau suivant ---------- */
.building-buy .price-pierre { display:inline-flex; align-items:center; gap:4px; margin-left:8px; }
.building-buy .price-pierre .rival-brique { width:18px; height:14px; }
.building-buy .price-pierre.manque { color:var(--inv-rouge-clair); }
.building-defense { display:flex; align-items:baseline; gap:8px; margin-top:6px; padding:6px 10px; border-radius:6px; background:rgba(5,17,35,.72); box-shadow:inset 0 0 0 1px var(--filet); min-width:0; }
.building-defense-k { flex:none; font:italic 900 13px/1 var(--f-titre); letter-spacing:.03em; text-transform:uppercase; color:var(--or-clair); }
.building-defense-t { min-width:0; font:600 13px/1.25 var(--f-texte); color:var(--ivoire); }
.building-defense-t b { color:#9FE3FF; font-weight:800; }

/* ---------- écrans étroits et courts (après les règles de base) ---------- */
@media (max-height:700px) {
  .inv-feuille { max-height:78%; }
  .screen.home.invasion #home-battle { min-height:64px; }
  .screen.home.invasion #home-battle-main { font-size:34px; }
}

/* ======================================================================================================================
   Invasion I4 (13 octobre 2026, contrat §8) : l'écran de ligue et la clôture de saison. Surface ivoire calme du socle, UN seul
   azur par écran (la ligne du joueur sur la ligue ; Réclamer sur la clôture), pastilles ivoire, cibles de 44 points, zones sûres.
   Aucun filter ni backdrop-filter sur #canvas. Les médias s'adaptent APRÈS les règles de base. */
.screen.panel.ligue-screen { padding:0 0 var(--nav-h); background:radial-gradient(120% 60% at 50% -10%, #FFFDF5 0%, var(--inv-ivoire) 55%, #EFE5C9 100%); color:var(--inv-encre); }
/* contre-lecture (mineur 3) : la ligue est un écran de liste comme Missions et Boutique (CONTRAT_MENUS) : la barre basse s'y montre, et
   ne plonge pas pendant la sortie de la Cité (la règle `versBas` d'arcmarch.css ne connaît pas cet écran : même poids, plus tard) */
#stage:has(> .screen.panel.ligue-screen[data-screen="ligue"][data-screen]:not([hidden])) > #nav-rail { display:flex; animation:none; }
.ligue-tete { flex:none; position:relative; z-index:2; display:flex; align-items:center; gap:6px; padding:calc(var(--safe-t) + 8px) calc(10px + var(--safe-r)) 8px calc(10px + var(--safe-l)); }
.ligue-retour, .ligue-param { width:48px; height:66px; border-radius:12px; background:var(--inv-ivoire); color:var(--inv-encre); box-shadow:var(--inv-ombre); border:1.5px solid var(--inv-bord); }
.ligue-retour .picon { width:24px; color:var(--inv-encre); }
.ligue-param svg { display:block; width:26px; height:26px; color:var(--inv-encre); }
.ligue-retour:active, .ligue-param:active { transform:translateY(2px); background:var(--inv-ivoire-2); }
.ligue-retour:focus-visible, .ligue-param:focus-visible { outline:3px solid var(--azur); outline-offset:2px; }
.ligue-plaque { flex:1; min-width:0; display:flex; align-items:center; gap:8px; min-height:66px; box-sizing:border-box; padding:4px 10px 4px 8px; border-radius:12px; background:var(--inv-ivoire); box-shadow:var(--inv-ombre); border:1.5px solid var(--inv-bord); }
.ligue-insigne { flex:none; width:44px; height:53px; filter:drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.ligue-insigne svg { width:100%; height:100%; display:block; }
.ligue-titres { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; container-type:inline-size; }
/* contre-lecture (mineur 2) : le nom de la ligue tient sur deux lignes au plus (« Ligue de la Couronne » à 320 points), jamais coupé */
.ligue-nom { margin:0; font:italic 900 23px/.95 var(--f-titre); color:var(--inv-encre); letter-spacing:.01em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow-wrap:anywhere; }
@container (max-width:180px) { .ligue-nom { font-size:20px; } }
@container (max-width:150px) { .ligue-nom { font-size:18px; } }
.ligue-sous { margin:0; display:flex; flex-direction:column; gap:3px; min-width:0; font:700 12.5px/1 var(--f-texte); color:var(--inv-encre-2); white-space:nowrap; }
.ligue-renom::before { content:''; display:inline-block; width:13px; height:13px; margin:0 4px -1px 0; background:#B8821C; -webkit-mask:var(--ic-etoile) center/contain no-repeat; mask:var(--ic-etoile) center/contain no-repeat; }
.ligue-restant { overflow:hidden; text-overflow:ellipsis; }
.ligue-restant::before { content:''; display:inline-block; width:13px; height:13px; margin:0 4px -1px 0; background:var(--inv-encre-2); -webkit-mask:var(--ic-temps) center/contain no-repeat; mask:var(--ic-temps) center/contain no-repeat; }
/* le classement : une colonne qui défile seule, entre l'en-tête et le pied ; la ligne du joueur se détache (fond et filet d'azur clair, jamais un bouton) ; les noms en Barlow, la police des lectures */
.ligue-liste { flex:1; min-height:0; list-style:none; margin:0; padding:2px 10px 8px; overflow:auto; display:flex; flex-direction:column; gap:4px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scroll-padding:50% 0; }
.ligue-entete { flex:none; display:flex; justify-content:space-between; padding:0 12px 2px; font:800 11.5px/1 var(--f-texte); letter-spacing:.04em; text-transform:uppercase; color:#8A5A12; }
.ligue-ligne { flex:none; display:flex; align-items:center; gap:8px; min-height:52px; padding:4px 12px 4px 8px; border-radius:12px; background:#fff; border:1px solid var(--inv-bord); color:var(--inv-encre); }
.ligue-ligne.podium { background:#FFF7DE; border-color:#E8C878; }
.ligue-ligne.vide { min-height:42px; background:transparent; border-color:transparent; border-bottom:1px solid #EFE6CC; border-radius:0; }
.ligue-ligne.moi { background:#EAF4FF; border:2px solid #2F86E6; color:var(--inv-encre); }
.ligue-rang-n { flex:none; width:34px; font:italic 900 19px/1 var(--f-titre); color:var(--inv-encre-2); text-align:right; }
.ligue-ligne.podium .ligue-rang-n { color:#B8821C; }
.ligue-ligne.moi .ligue-rang-n { color:#0B4FB3; }
.ligue-emb { flex:none; width:32px; height:38px; }
.ligue-ligne.vide .ligue-emb { opacity:.55; }
.ligue-emb svg { width:100%; height:100%; display:block; }
.ligue-nom-l { flex:1; min-width:0; display:flex; align-items:baseline; gap:6px; font:800 15.5px/1.2 var(--f-texte); white-space:nowrap; overflow:hidden; }
/* contre-lecture (mineur 2) : l'ellipsis ne s'applique pas à un conteneur flex : le nom est un enfant à part, « toi » ne rétrécit pas */
.ligue-nom-t { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ligue-ligne.vide .ligue-nom-t { font-weight:700; color:var(--inv-encre-2); }
/* passe Astra : la division en texte à côté du petit insigne */
.ligue-div-p { flex:none; min-width:26px; padding:3px 5px; border-radius:7px; background:var(--inv-ivoire-2); border:1px solid var(--inv-bord); font:italic 900 14px/1 var(--f-titre); color:var(--inv-encre-2); text-align:center; }
.ligue-ligne.moi .ligue-div-p { background:#fff; border-color:#9CC4F2; color:#0B4FB3; }
.ligue-nom-l small { flex:none; font:800 11px/1 var(--f-texte); color:#0B4FB3; text-transform:uppercase; letter-spacing:.06em; }
.ligue-renom-l { flex:none; display:flex; align-items:baseline; gap:4px; }
.ligue-renom-l b { font:italic 900 22px/1 var(--f-titre); }
.ligue-ligne.vide .ligue-renom-l b { font-size:18px; color:var(--inv-encre-2); }
/* le pied : la récompense du rang actuel en icônes, la prévision de clôture à la demande */
.ligue-pied { flex:none; display:flex; flex-direction:column; gap:2px; padding:8px calc(10px + var(--safe-r)) 6px calc(10px + var(--safe-l)); border-top:1.5px solid var(--inv-bord); background:var(--inv-ivoire); box-shadow:0 -6px 18px rgba(8,20,48,.12); }
.ligue-rec { margin:0; display:flex; align-items:center; gap:10px; min-height:44px; min-width:0; padding:4px 12px; border-radius:12px; background:#fff; border:1px solid var(--inv-bord); font:600 13.5px/1.2 var(--f-texte); color:var(--inv-encre-2); }
.ligue-rec > span { min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:2px 12px; }
.ligue-rang { flex:none; font:italic 900 22px/1 var(--f-titre); color:var(--inv-encre); white-space:nowrap; }
.ligue-rec-l { flex:0 0 100%; font:700 12px/1 var(--f-texte); color:var(--inv-encre-2); }
.lg-g { display:inline-flex; align-items:center; gap:4px; }
.lg-g .picon { width:20px; color:#B8821C; border-radius:50%; }
.lg-g .picon.pi-cristaux { color:inherit; border-radius:0; }
.lg-g .rival-brique { width:20px; height:15px; }
.lg-g b { font:italic 900 20px/1 var(--f-titre); color:var(--inv-encre); }
/* retour 10 du 20 octobre 2026 : le bandeau « Toutes les ligues » (pied de l'écran de ligue), qui dit aussi le seuil de la suivante */
.ligue-toutes { display:flex; align-items:center; gap:10px; width:100%; min-height:52px; margin:4px 0 0; padding:4px 12px 4px 8px; border-radius:12px; background:#fff; border:1px solid var(--inv-bord);
  box-shadow:0 2px 0 #D8C9A3; color:var(--inv-encre); text-align:left; }
.ligue-toutes:active { transform:translateY(2px); box-shadow:none; }
.ligue-toutes:focus-visible { outline:3px solid var(--azur); outline-offset:2px; }
.ligue-toutes-ins { flex:none; width:32px; height:38px; }
.ligue-toutes-ins svg { display:block; width:100%; height:100%; }
.ligue-toutes-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ligue-toutes-t b { font:italic 900 19px/1 var(--f-titre); color:var(--inv-encre); }
.ligue-toutes-t small { font:700 12.5px/1.15 var(--f-texte); color:var(--inv-encre-2); overflow-wrap:anywhere; }
.ligue-toutes-chev { flex:none; width:10px; height:10px; margin-right:4px; border-right:2.5px solid var(--inv-encre-2); border-bottom:2.5px solid var(--inv-encre-2); transform:rotate(-45deg); }
/* « Toutes les ligues » : un volet plein écran posé sur l'écran de ligue (même surface ivoire, barre basse visible), une colonne, de la Couronne au Bois */
.ligues-echelle { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; padding:0 0 var(--nav-h); box-sizing:border-box;
  background:radial-gradient(120% 60% at 50% -10%, #FFFDF5 0%, var(--inv-ivoire) 55%, #EFE5C9 100%); color:var(--inv-encre); }
.ligues-echelle[hidden] { display:none; }
.ligues-echelle .ligue-plaque { padding-left:14px; }
.ligues-echelle-aide { font-weight:600; }
.ligues-echelle-liste { flex:1; min-height:0; list-style:none; margin:0; padding:2px calc(10px + var(--safe-r)) 12px calc(10px + var(--safe-l)); overflow:auto; display:flex; flex-direction:column; gap:8px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.lg-palier { flex:none; display:flex; flex-direction:column; padding:6px 10px 6px 8px; border-radius:14px; background:#fff; border:1px solid var(--inv-bord); }
.lg-palier.actuelle { background:#EAF4FF; border:2px solid #2F86E6; }
.lg-palier.verrou { background:var(--inv-ivoire-2); }
.lg-p-tete { display:flex; align-items:center; gap:10px; width:100%; min-height:52px; margin:0; padding:0; border:0; background:none; color:inherit; text-align:left; }
.lg-p-tete:focus-visible { outline:3px solid var(--azur); outline-offset:2px; border-radius:10px; }
.lg-p-ins { flex:none; width:40px; height:48px; }
.lg-p-ins svg { display:block; width:100%; height:100%; }
.lg-palier.actuelle .lg-p-ins { width:50px; height:60px; }
.lg-p-titres { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.lg-p-nom { min-width:0; font:italic 900 20px/1 var(--f-titre); color:var(--inv-encre); }
.lg-p-seuil { font:600 12.5px/1.1 var(--f-texte); color:var(--inv-encre-2); }
.lg-p-ici { flex:none; padding:4px 8px; border-radius:9px; background:#2F86E6; color:#fff; font:800 11.5px/1 var(--f-texte); letter-spacing:.05em; text-transform:uppercase; }
.lg-p-verrou, .lg-p-faite { flex:none; display:inline-flex; align-items:center; gap:4px; max-width:46%; font:700 12.5px/1.15 var(--f-texte); color:var(--inv-encre-2); text-align:right; }
.lg-p-verrou .picon, .lg-p-faite .picon { flex:none; width:14px; }
.lg-p-chev { flex:none; width:9px; height:9px; margin:-4px 2px 0 0; border-right:2.5px solid var(--inv-encre-2); border-bottom:2.5px solid var(--inv-encre-2); transform:rotate(45deg); }
.lg-palier.ouverte .lg-p-chev { margin-top:4px; transform:rotate(-135deg); }
.lg-p-corps { display:flex; flex-direction:column; gap:6px; padding:4px 0 4px; }
.lg-p-corps[hidden] { display:none; }
.lg-p-prochaine { margin:0; font:800 13.5px/1.2 var(--f-texte); color:#0B4FB3; }
/* la piste des divisions : trois repères, pas trois boutons ; la tienne en azur */
.lg-divs { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; border-top:2px solid var(--inv-bord); }
.lg-div { min-width:0; display:flex; align-items:baseline; justify-content:center; gap:5px; padding:6px 2px 2px; border-top:3px solid transparent; margin-top:-2px; }
.lg-div b { flex:none; font:italic 900 16px/1 var(--f-titre); color:var(--inv-encre); }
.lg-div small { min-width:0; font:700 12px/1 var(--f-texte); color:var(--inv-encre-2); white-space:nowrap; }
.lg-div.faite { border-top-color:#9CC4F2; }
.lg-div.ici { border-top-color:#2F86E6; }
.lg-div.ici b, .lg-div.ici small { color:#0B4FB3; }
.lg-p-rec { margin:1px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:3px 10px; }
.lg-p-rec small { flex:0 0 100%; font:700 12px/1 var(--f-texte); color:var(--inv-encre-2); }
.lg-p-rec .lg-g .picon { width:17px; }
.lg-p-rec .lg-g .rival-brique { width:17px; height:13px; }
.lg-p-rec .lg-g b { font-size:17px; }

/* ---------- clôture de saison : carte ivoire sur un voile, UN bouton « Prendre » ---------- */
.screen.dim.saison-screen { padding:calc(var(--safe-t) + 12px) 14px calc(var(--safe-b) + 12px); background:radial-gradient(ellipse at 50% 35%, rgba(6,16,30,.4), rgba(6,16,30,.82)); }
.saison-carte { flex:none; width:100%; max-width:332px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 14px 14px; border-radius:22px;
  background:var(--inv-ivoire); color:var(--inv-encre); border:1.5px solid var(--inv-bord); box-shadow:0 8px 30px rgba(0,0,0,.5); }
.screen.dim.saison-screen:not([hidden]) .saison-carte { animation:deplie 180ms var(--courbe) both; }
.saison-insigne { width:44px; height:54px; filter:drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.saison-insigne svg { width:100%; height:100%; display:block; }
.saison-kicker { margin:0; font:800 12.5px/1 var(--f-texte); letter-spacing:.06em; text-transform:uppercase; color:#8A5A12; }
/* le rang est le héros : un grand « 4e », la ligue à sa suite */
.saison-titre { margin:0; display:flex; flex-direction:column; align-items:center; gap:0; text-align:center; color:var(--inv-encre); }
.saison-rang-n { font:italic 900 76px/.9 var(--f-titre); letter-spacing:.01em; }
.saison-rang-l { font:italic 900 24px/1.05 var(--f-titre); }
.saison-sous { margin:2px 0 0; text-align:center; font:600 13.5px/1.25 var(--f-texte); color:var(--inv-encre-2); }
.saison-tag { margin:2px 0 0; padding:3px 12px; border-radius:10px; font:800 13px/1.1 var(--f-texte); color:#4A2F04; background:linear-gradient(#FFF1BF, #FFE08A); border:1.5px solid #E8B64C; }
.saison-tag[hidden] { display:none; }
/* les gains : une rangée de colonnes alignées (l'icône, le montant, son mot), sans cadre par montant */
.saison-gains { display:grid; grid-template-columns:repeat(auto-fit, minmax(84px, 1fr)); gap:6px; width:100%; margin:6px 0 2px; padding:10px 4px; border-top:1px solid #EFE6CC; border-bottom:1px solid #EFE6CC; }
.saison-gain { min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.saison-gain .picon { width:30px; color:var(--or); border-radius:50%; }
.saison-gain .pi-cristaux { color:#5CB8FF; border-radius:0; }
.saison-gain .pi-etoile { color:#B8821C; }
.saison-gain .rival-brique { width:30px; height:23px; }
.saison-gain b { font:italic 900 30px/1 var(--f-titre); color:var(--inv-encre); }
.saison-gain small { font:700 12.5px/1.1 var(--f-texte); color:var(--inv-encre-2); text-align:center; }
/* la pierre qui ne peut pas entrer : une phrase factuelle, pas une alerte rouge */
.saison-gain .rival-brique { margin:3.5px 0; }
.saison-note { margin:0 0 4px; text-align:center; font:600 12.5px/1.25 var(--f-texte); color:var(--inv-encre-2); overflow-wrap:anywhere; }
.saison-reclamer { width:100%; min-width:0; min-height:62px; margin:6px 0 0; padding:0 10px; }
.saison-reclamer .command-copy { min-width:0; max-width:100%; }
.saison-reclamer .picon { width:28px; }
.saison-reclamer .command-copy strong { font-size:34px; }
@media (max-height:700px) {
  .ligue-ligne { min-height:46px; }
  .saison-insigne { width:36px; height:44px; }
  .saison-rang-n { font-size:60px; }
  .saison-reclamer { min-height:56px; }
  .saison-reclamer .command-copy strong { font-size:30px; }
}
.inv-venger.inv-honneur { padding:0 10px; font-size:16px; line-height:1.05; text-align:center; min-width:74px; }

/* R1 (correcteur) : la ligne du journal d'une attaque tenue dont l'affront est à venger garde le Renom acquis sous le bouton ; la pastille d’une attaque repoussée est bleu azur (ni le rouge du pillage ni le vert de « tenue ») */
.inv-act { flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; }

/* ======================================================================================================================
   résultat du raid, vue du lot 3 (18 octobre 2026). Critique d'Astra (5 sur 10) : « le résultat cumule célébration, comptabilité, progression, vidéo et amélioration ». UNE vue hiérarchisée :
   l'issue (titre), l'or gagné en héros, le reste du butin sur une ligne, « En plus » (coffre, or ramassé), la vidéo en second ; la progression et le conseil sont dans « Détail », à la demande.
   Le contenu défile dans .raid-corps ; le PIED FIXE porte UNE action principale (Améliorer quand il y a de quoi, sinon Autre rival), l'autre rival en second et la Cité.
   Ces règles reprennent celles que socle-menus.css portait et les remplacent (même origine, spécificité d'écran : `.screen.raid-outcome`). Aucun filter ni backdrop-filter. ====================================================================================================================== */
.screen.raid-outcome .result-panel.raid-panel { display:flex; flex-direction:column; align-items:stretch; padding:0; gap:0; max-height:100%; min-height:0; overflow:hidden; border:1.5px solid var(--sm-bord); background:var(--sm-iv); box-shadow:var(--sm-ombre-carte); }
.raid-panel [hidden] { display:none !important; }
.raid-corps { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:14px 16px 10px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none; touch-action:pan-y; }
.raid-corps::-webkit-scrollbar { display:none; }
.raid-corps > * { flex:none; }
.raid-panel .picon.pi-or { border-radius:50%; }
/* l'issue */
.raid-corps .plaque-titre { gap:2px; padding:0; }
.screen.raid-outcome .raid-corps .plaque-titre .result-heading { font-size:46px; line-height:.95; }
.screen.raid-outcome .raid-corps .result-copy { margin:0; font:700 14px/1.2 var(--f-texte); text-align:center; color:var(--sm-ink2); }
.screen.raid-outcome.defaite .raid-corps .result-copy { color:var(--sm-rouge-s); }
.raid-corps .over-base { gap:5px; }
.raid-corps .over-base-lbl { margin:0; text-align:center; font:700 14px/1.15 var(--f-texte); color:var(--sm-ink2); }
.raid-corps .over-base-lbl span { font-weight:700; }
.raid-corps .over-base-lbl b { font-size:15px; }
/* le héros : l'or gagné ; le reste du butin sur UNE ligne, sans cadre par montant */
.screen.raid-outcome .raid-corps .gain, .screen.raid-outcome .raid-corps .gain-heros { min-height:50px; }
.screen.raid-outcome .raid-corps .gain-heros { gap:8px; }
.screen.raid-outcome .raid-corps .gain-heros .gain-piece { width:44px; }
.screen.raid-outcome .raid-corps .gain-heros .gain-n { font-size:52px; }
.screen.raid-outcome .raid-corps .gain { gap:4px; }
.screen.raid-outcome .raid-corps .raid-autres { display:flex; flex-wrap:wrap; justify-content:center; gap:2px 16px; }
.screen.raid-outcome .raid-corps .raid-autres .gain-item { height:auto; padding:0; gap:5px; border:0; border-radius:0; background:none; box-shadow:none; }
.screen.raid-outcome .raid-corps .raid-autres .gain-item b { font-size:22px; color:var(--sm-ink); }
.screen.raid-outcome .raid-corps .raid-autres .gain-item small { font:700 13px/1 var(--f-texte); color:var(--sm-ink2); }
.screen.raid-outcome .raid-corps .raid-autres .gain-item .picon { width:20px; }
.raid-corps .arena-result-metric { margin:0; font:700 13px/1.25 var(--f-texte); color:var(--sm-ink2); }
.raid-corps .rr-bonus { margin:-4px 0 0; text-align:center; font:700 12.5px/1.25 var(--f-texte); color:#8A5A12; }
/* le trophée de fête : une ligne, la médaille de fête (rosette) à gauche */
.raid-trophee { display:flex; align-items:center; justify-content:center; gap:12px; padding:6px 12px; border-radius:14px; background:linear-gradient(#FFF1BF, #FFE08A); border:1.5px solid #E8B64C; color:#4A2F04; }
.raid-medaille { display:block; flex:none; width:48px; height:48px; }
.raid-medaille svg { display:block; width:100%; height:100%; }
.rt-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rt-txt small { font:800 12px/1.1 var(--f-texte); letter-spacing:.04em; text-transform:uppercase; color:#8A5A12; }
.rt-txt b { font:italic 900 22px/1 var(--f-titre); color:var(--sm-ink); }
/* « En plus » : une carte, une ligne par source (coffre, or ramassé en chemin, butin multiplié pris), des libellés constants */
.rr-plus { display:flex; flex-direction:column; padding:2px 12px; border-radius:14px; background:var(--sm-blanc); border:1.5px solid var(--sm-bord); }
.rr-plus .rr-ligne { margin:0; border-top:1px solid #EFE6CC; }
.rr-plus .rr-ligne:first-child, .rr-plus .rr-ligne[hidden] + .rr-ligne:not([hidden]) { border-top:0; }
.rr-plus .raid-chemin { display:flex; align-items:center; gap:8px; width:auto; min-height:42px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; font:700 14px/1.2 var(--f-texte); color:var(--sm-ink); }
.rr-plus .raid-chemin .picon { width:22px; color:var(--sm-or-s); }
.rr-plus .raid-chemin b { margin-left:auto; font:italic 900 22px/1 var(--f-titre); color:var(--sm-ink); }
.rr-plus .ev-coffre-res { display:grid; grid-template-columns:40px minmax(0, 1fr); align-items:center; column-gap:10px; row-gap:2px; padding:6px 0; border:0; border-radius:0; background:none; box-shadow:none; }
.rr-plus .ev-cr-art { width:40px; height:40px; }
.rr-plus .ev-cr-titres { gap:1px; }
.rr-plus .ev-cr-titres small { font:800 11.5px/1 var(--f-texte); letter-spacing:.04em; }
.rr-plus .ev-cr-titres b { font-size:19px; }
.rr-plus .ev-coffre-res .ev-gains { grid-column:2; justify-content:flex-start; gap:2px 12px; }
.rr-plus .ev-coffre-res .ev-gain { height:auto; padding:0; gap:4px; border:0; border-radius:0; background:none; box-shadow:none; animation:none; }
.rr-plus .ev-coffre-res .ev-gain b { font-size:21px; }
.rr-plus .ev-coffre-res .ev-gain small { font:700 12.5px/1 var(--f-texte); }
.rr-plus .ev-cr-note { grid-column:2; text-align:left; }
.rr-plus.solo { padding:6px 12px; border-color:#E8B64C; background:linear-gradient(#FFF6D6, #fff 70%); }
.rr-plus.solo .ev-coffre-res { grid-template-columns:56px minmax(0, 1fr); }
.rr-plus.solo .ev-cr-art { width:56px; height:56px; }
.rr-plus.solo .ev-cr-titres b { font-size:23px; }
.rr-plus.solo .ev-coffre-res .ev-gain b { font-size:26px; }
/* la vidéo : un second plan, un bord d'or sur l'ivoire (le doré plein est à ce qui se prend) */
.screen.raid-outcome .raid-corps .menu-command.raid-double { min-height:48px; padding:3px 12px; background:#FFF8E1; border:2px solid #E8B64C; box-shadow:0 2px 0 #C99626; color:var(--sm-ink); }
.screen.raid-outcome .raid-corps .menu-command.raid-double:not(:disabled) { background:#FFF8E1; border:2px solid #E8B64C; box-shadow:0 2px 0 #C99626; color:var(--sm-ink); }
.screen.raid-outcome .raid-corps .menu-command.raid-double .command-copy { align-items:flex-start; gap:2px; }
.screen.raid-outcome .raid-corps .menu-command.raid-double .command-copy strong { font-size:21px; color:var(--sm-ink); }
.screen.raid-outcome .raid-corps .menu-command.raid-double .command-copy small { font:700 13px/1 var(--f-texte); color:#6B4A08; }
.screen.raid-outcome .raid-corps .menu-command.raid-double > .picon { width:26px; background-color:#946508; }
.screen.raid-outcome .raid-corps .menu-command.raid-double:not(:disabled):active { transform:translateY(2px); box-shadow:0 0 0 #C99626; }
.screen.raid-outcome .raid-corps .menu-command.raid-double:disabled { background:var(--sm-iv2); border:1.5px solid var(--sm-bord); box-shadow:none; }
/* le détail à la demande : un bouton qui résume la progression, puis le défi, la saison et le conseil */
/* le pied fixe : l'action principale (Autre rival), la Cité en bouton carré */
.screen.raid-outcome .raid-pied { flex:none; display:grid; grid-template-columns:minmax(0, 1fr) 62px; grid-template-areas:"main cite"; gap:8px; margin:0; padding:10px 14px 12px; border-top:1.5px solid var(--sm-bord); background:var(--sm-iv); border-radius:0 0 22px 22px; box-shadow:0 -6px 10px -8px rgba(18,35,63,.25); }
.screen.raid-outcome .raid-pied > .menu-command { min-width:0; width:auto; min-height:52px; margin:0; padding:4px 10px; gap:8px; justify-content:center; }
.screen.raid-outcome .raid-pied > .raid-autre-pied { grid-area:main; }
.screen.raid-outcome .raid-pied > .raid-cite { grid-area:cite; }
.screen.raid-outcome .raid-pied > .menu-command.primary.raid-autre-pied strong { font-size:30px; }
.screen.raid-outcome .raid-cite { flex:none; width:auto; min-height:52px; align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; margin:0; padding:2px 0; box-sizing:border-box; border-radius:14px; background:var(--sm-blanc); border:1.5px solid var(--sm-bord); box-shadow:0 3px 0 #D8C9A3; color:var(--sm-ink); }
.raid-cite .picon { width:24px; color:var(--sm-ink); }
.raid-cite small { font:800 12px/1 var(--f-texte); color:var(--sm-ink2); }
.raid-cite:active { transform:translateY(2px); box-shadow:0 1px 0 #D8C9A3; }
.raid-cite:focus-visible { outline:3px solid var(--azur); outline-offset:2px; }
@media (max-height:700px) {
  .screen.raid-outcome .raid-corps .plaque-titre .result-heading { font-size:38px; }
  .raid-corps { padding:10px 12px 8px; gap:6px; }
  .screen.raid-outcome .raid-pied { padding:6px 12px 10px; }
  .screen.raid-outcome .raid-corps .gain-heros .gain-n { font-size:42px; }
}

/* ======================================================================================================================
   Les Arènes (liste), lot 3 (18 octobre 2026) : critique d'Astra (5,3) « deux paragraphes repoussent les défis, les cartes se ressemblent, la police condensée sert aux métadonnées, "Ban de l'assaut" est obscur ».
   Une phrase d'introduction (le reste dans « Comment ça marche ? »), trois familles aux médaillons de couleurs distinctes (hors azur et rouge : l'azur est à l'action, le rouge à l'ennemi), chaque carte en trois niveaux
   (le nom, la description, « Rang 1 · record 0 · +30 or » en police de lecture), « Jouer » seul en azur. Cette liste vit dans les feuilles globales : ces règles ne la touchent que par l'écran (`.arena-screen`), après elles.
   ====================================================================================================================== */
.arena-screen .arena-intro { margin:6px 4px 2px; font:800 15px/1.2 var(--f-texte); color:var(--sm-ink); }
.arena-screen .arena-intro + .arena-intro { display:none; }   /* la phrase sur la garnison rivale (posée par progression.js) est dans « Comment ça marche ? » */
.arena-aide { margin:0 4px 6px; }
.arena-aide summary { display:flex; align-items:center; min-height:44px; margin:0; list-style:none; cursor:pointer; font:700 13.5px/1.2 var(--f-texte); color:var(--sm-ink2); text-decoration:underline; text-underline-offset:3px; }
.arena-aide summary::-webkit-details-marker { display:none; }
.arena-aide summary:focus-visible { outline:3px solid var(--azur); outline-offset:2px; }
.arena-aide p { margin:0 0 6px; font:600 13px/1.3 var(--f-texte); color:var(--sm-ink2); }
.arena-screen .arena-contracts { gap:6px; }
.arena-screen .arena-group-title { margin:8px 4px 0; padding:0; display:flex; align-items:baseline; justify-content:space-between; font:italic 900 18px/1 var(--f-titre); letter-spacing:.04em; text-transform:uppercase; color:var(--sm-ink); }
.arena-screen .arena-group-title small { font:700 12.5px/1 var(--f-texte); letter-spacing:0; text-transform:none; color:var(--sm-ink2); }
.arena-screen .arena-contract { min-height:68px; grid-template-columns:44px minmax(0, 1fr) auto; gap:10px; padding:8px 8px 8px 8px; border-radius:14px; }
.arena-screen .arena-contract:not(.arena-siege-variant) { min-height:76px; }
.arena-screen .arena-contract > span:not(.arena-med) { gap:2px; }
.arena-screen .arena-contract strong { font:italic 900 20px/1 var(--f-titre); }
.arena-screen .arena-contract small { font:600 13px/1.2 var(--f-texte); color:var(--sm-ink2); }
.arena-screen .arena-siege-variant strong { font-size:20px; }
.arena-meta { display:flex; flex-wrap:wrap; gap:0 6px; margin-top:1px; }
.arena-screen .arena-contract em { font:700 12.5px/1.25 var(--f-texte); font-style:normal; color:#8A5A12; }
.arena-meta em { white-space:nowrap; }
.arena-meta em + em { font-weight:800; }
.arena-screen .arena-contract > b { min-width:76px; }
/* le médaillon de famille : un disque de couleur, le pictogramme en blanc ; Siège (bronze), Tenir (vert), Vitesse (violet) */
.arena-med { flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--fam, #946508); box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 2px 0 rgba(18,35,63,.25); }
.arena-med .picon { width:24px; color:#fff; }
.fam-siege { --fam:linear-gradient(#D9A441, #946508); }
.fam-tenir { --fam:linear-gradient(#58B04B, #2E6B22); }
.fam-vitesse { --fam:linear-gradient(#9B6CE6, #5B35B0); }
.arena-screen .arena-contract > .arena-med { color:#fff; }
.arena-screen .arena-contract.arena-siege-variant { grid-template-columns:44px minmax(0, 1fr) auto; }
.arena-chrono-ban { padding:2px 4px; font:800 13px/1.2 var(--f-texte); }

/* ======================================================================================================================
   Fiches du Donjon et de la Trésorerie (boucliers, pierre, banque), lot 3 : la défense en lignes alignées (un libellé, une valeur « avant → après »), jamais une phrase à retours de ligne ;
   la fiche générique d'un bâtiment (avant/après héros, bouton) reste celle des feuilles globales. ====================================================================================================================== */
.building-defense-t:has(.df-l) { display:flex; flex-direction:column; gap:3px; }
.df-l { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.df-l > i { font:700 13px/1.2 var(--f-texte); font-style:normal; color:var(--sm-ink2); }
.df-l > span { font:700 14px/1.2 var(--f-texte); color:var(--sm-ink); text-align:right; }
.df-l > span b { font:italic 900 19px/1 var(--f-titre); color:#0B4FB3; }
.df-l > span small { display:block; font:600 11.5px/1.2 var(--f-texte); color:var(--sm-ink2); }

/* Le journal des attaques ouvert, l’étiquette « Ouvrir le coffre » de la Cité se tait. */
#stage:has(#inv-journal:not([hidden])) > :is(.coffre-status, .coffre-gain, .coffre-recu) { display:none; }
.building-defense-t:has(.df-l) { flex:1; }

/* Trésorerie : « Améliorer » (or et pierre) prend toute la largeur, « Collecter » en dessous sur une ligne (le prix en pierre débordait à 390) */
.screen[data-building="loot"] .building-actions .building-buy { flex:1 0 100%; order:-1; }
.screen[data-building="loot"] .building-actions .building-secondary { flex:1 0 100%; white-space:nowrap; justify-content:center; }
.building-secondary { white-space:nowrap; }

/* ======================================================================================================================
   TOUR 2 (lot E, 18 octobre 2026). Pieds fixes : le défilement FINIT au-dessus du pied (le Journal garde la hauteur de la barre basse, la fiche du Donjon montre son offre sans défiler), le rouge ne signifie que l'ennemi
   ou le danger (la protection est bleue, une alerte « Sans bouclier » ambre, une perte neutre), les explications qui répètent le titre disparaissent.
   ====================================================================================================================== */
/* ---------- Journal « Pendant ton absence » : le bilan en haut, les événements dessous, rien sous la barre basse ---------- */
.inv-feuille { max-height:70%; padding-bottom:calc(var(--nav-h) + 6px); }
.inv-f-liste { flex:1 1 auto; min-height:0; padding:6px 10px 8px; }
.inv-f-tete { padding:8px 8px 8px 16px; }
.inv-f-tete h2 { font-size:23px; }
.inv-f-sous { font:700 14px/1.2 var(--f-texte); color:var(--inv-encre); }
.inv-att { min-height:58px; padding:5px 8px 5px 10px; gap:9px; }
.inv-att .inv-emb { width:30px; height:36px; }
.inv-att .inv-a-nom { font:800 16px/1.15 var(--f-texte); }
.inv-att .inv-a-quoi { font:600 13px/1.2 var(--f-texte); white-space:normal; overflow:visible; }
.inv-att.pillee .inv-a-quoi b { color:var(--inv-encre); }
.inv-att .inv-a-age { font:600 12px/1.15 var(--f-texte); color:var(--inv-encre-2); }
.inv-venger { height:44px; padding:0 12px; font:800 14px/1.05 var(--f-texte); letter-spacing:0; }
/* ---------- résultat du raid : la défaite n'est pas rouge (le rouge est à l'ennemi) ; la barre est un indicateur secondaire ---------- */
.screen.raid-outcome.defaite .raid-corps .plaque-titre .result-heading { color:var(--sm-ink); }
.screen.raid-outcome.defaite .raid-corps .result-copy { color:var(--sm-ink2); }
.raid-corps .over-base { gap:3px; }
.raid-corps .over-base .sangle { height:6px; }
.raid-corps .over-base-lbl { font-size:13px; }
.screen.raid-outcome.defaite .raid-destruction .over-base-lbl b { color:var(--sm-ink); }
.rr-plus-t { display:block; padding:6px 0 2px; font:800 11.5px/1 var(--f-texte); letter-spacing:.05em; text-transform:uppercase; color:#8A5A12; }
.raid-trophee { flex-direction:column; gap:4px; padding:10px 12px 8px; background:radial-gradient(70% 90% at 50% 35%, #FFF3C4, #FFE9A8); }
.raid-medaille { width:84px; height:84px; margin:0; filter:drop-shadow(0 5px 5px rgba(30,20,10,.3)); }
.rt-txt { align-items:center; text-align:center; }
.rt-txt b { font-size:24px; }
.screen.raid-outcome .raid-corps .menu-command.raid-double .command-copy strong { font:800 17px/1.1 var(--f-texte); }
/* ---------- ligue : lignes de 46 points, un nom reste lisible à zéro (seul le score s'atténue), le pied en deux lignes alignées ---------- */
.ligue-ligne { min-height:46px; padding:3px 12px 3px 8px; }
.ligue-ligne.vide { min-height:40px; opacity:1; }
.ligue-ligne.vide .ligue-emb { opacity:1; }
.ligue-ligne.vide .ligue-nom-t { color:var(--inv-encre); font-weight:700; }
.ligue-ligne.vide .ligue-renom-l b { color:#8E9AAE; }
.ligue-param { width:44px; height:56px; }
.ligue-param svg { width:22px; height:22px; }
.ligue-rec { gap:8px; flex-wrap:wrap; }
.ligue-rec > span.ligue-rec-t { flex:1 1 100%; }
.ligue-rec-l { flex:0 0 100%; }
.ligue-pied { gap:0; }
/* ---------- clôture : un caractère de résultat (rayons derrière le rang), les gains sur des socles, « Donjon plein » en ambre ---------- */
.saison-carte { position:relative; overflow:hidden; }
.saison-carte::before { content:''; position:absolute; left:50%; top:96px; width:420px; height:420px; margin:-210px 0 0 -210px; background:repeating-conic-gradient(from 0deg, rgba(242,193,78,.2) 0 8deg, rgba(242,193,78,0) 8deg 20deg); -webkit-mask:radial-gradient(circle, #000 0, rgba(0,0,0,0) 62%); mask:radial-gradient(circle, #000 0, rgba(0,0,0,0) 62%); pointer-events:none; }
.saison-carte > * { position:relative; }
.saison-gains { border:0; padding:0; gap:6px; }
.saison-gain { padding:8px 4px 7px; border-radius:12px; background:#fff; border:1px solid var(--inv-bord); }
.saison-note { padding:6px 10px; border-radius:10px; background:#FFF1D6; border:1.5px solid #F2A53A; color:#6B3F00; font-weight:700; }
.saison-reclamer .command-copy strong { font-size:27px; }
/* ---------- Donjon et Trésorerie : l'offre de bouclier passe après les bénéfices, le décor se réduit : tout se lit sans défiler ---------- */
.screen[data-building="keep"] .building-sheet, .screen[data-building="loot"] .building-sheet { max-height:80%; }
.screen[data-building="keep"] .building-interieur, .screen[data-building="loot"] .building-interieur { min-height:84px; }
#building-offre-bouclier { order:5; }
.screen[data-building="keep"] .building-defense, .screen[data-building="loot"] .building-defense { margin-top:2px; padding:5px 8px; }
.screen[data-building="keep"] .building-defense-k, .screen[data-building="loot"] .building-defense-k { display:none; }
.offre-tete .picon.pi-bouclier { color:#2F86E6; }
/* tour 2 : plus d'orphelin d'un mot en fin de ligne sur les phrases courtes (défi, note de clôture, effet du bâtiment, bouton d'offre) */
.ev-obj-texte, .saison-note, #building-desc, .offre-btn .command-copy strong { text-wrap:balance; }
.menu-command.primary.saison-reclamer .command-copy strong { font:italic 900 clamp(19px, 6.4vw, 25px)/1 var(--f-titre); white-space:nowrap; }

/* ======================================================================================================================
   Retours de Bastien du 19 octobre 2026, chantier invasion-hud. Bloc en fin de feuille : il reprend les règles plus haut sans les déplacer.
   ====================================================================================================================== */
/* ---------- retour 2 : la protection se lit SUR l'or. Couleur d'état, jauge fine de la part à l'abri, mots courts, boucliers collés au chiffre ---------- */
#stage .inv-barre .inv-or { flex:1 1 0; gap:6px; padding:0 7px 0 6px; }
.inv-or .inv-or-copy { display:flex; flex:1 1 auto; min-width:0; flex-direction:column; justify-content:center; gap:4px; }





.inv-or-garde { display:flex; align-items:center; gap:5px; min-width:0; }


.inv-or-pct { flex:none; font:800 11px/1 var(--f-lecture); white-space:nowrap; color:var(--inv-encre-2); }
/* protégé (bouclier) ou tout en banque : bleu de protection */
#stage .inv-barre .inv-or:is(.garde-bouclier, .garde-abri) { background:linear-gradient(#F1F9FF, #CFE7FF); border-color:#3C86D6; box-shadow:0 2px 0 #2F6FB8, 0 4px 8px rgba(8,20,48,.16); }

.inv-or:is(.garde-bouclier, .garde-abri) .inv-or-pct { color:#0B4FA0; }
/* une part exposée : ambre mesuré, la part à l'abri en bleu sur la part exposée en ambre */
#stage .inv-barre .inv-or.garde-expose { background:linear-gradient(#FFF9EC, #FCE6BC); border-color:#D98A1C; box-shadow:0 2px 0 #B8730F, 0 4px 8px rgba(8,20,48,.16); }

.inv-or.garde-expose .inv-or-pct { color:#8A4B00; }
.inv-or.garde-vide .inv-or-pct { color:var(--inv-encre-2); }
.inv-or[aria-expanded="true"] { outline:2.5px solid var(--inv-encre); outline-offset:1px; }
/* la bulle de protection, sous la pastille d'or */
.inv-bulle { position:absolute; z-index:11; top:calc(var(--safe-t) + 60px); left:calc(40px + var(--safe-l)); width:min(262px, calc(100% - 50px)); box-sizing:border-box; padding:10px 12px;
  border-radius:14px; background:var(--inv-ivoire); color:var(--inv-encre); border:1.5px solid var(--inv-bord); box-shadow:0 3px 0 #BFAE84, 0 10px 24px rgba(8,20,48,.4); }
.inv-bulle::before { content:''; position:absolute; top:-7px; left:52px; width:12px; height:12px; background:var(--inv-ivoire); border-left:1.5px solid var(--inv-bord); border-top:1.5px solid var(--inv-bord); transform:rotate(45deg); }
.inv-bulle-titre { margin:0 0 7px; font:italic 900 19px/1.05 var(--f-titre); color:#0B4FA0; }
.inv-bulle.expose .inv-bulle-titre { color:#8A4B00; }
.inv-bulle-lignes { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.inv-bulle-lignes li { display:flex; align-items:center; gap:8px; min-height:24px; font:600 13px/1.15 var(--f-texte); color:var(--inv-encre-2); }
#stage .inv-bulle-lignes .picon { flex:none; width:20px; height:20px; }
.inv-bulle-lignes .pi-verrou { color:#8A5A12; }
.inv-bl-lbl { flex:1 1 auto; min-width:0; }
.inv-bulle-lignes b { flex:none; font:800 15px/1 var(--f-lecture); color:var(--inv-encre); white-space:nowrap; }
.inv-bulle-lignes li.expose b { color:#A35A00; }
.inv-bulle-note { margin:7px 0 0; font:600 12.5px/1.25 var(--f-texte); color:var(--inv-encre-2); }
.inv-bulle-act { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; margin-top:8px; border-radius:12px; background:transparent; border:2px solid var(--inv-encre);
  color:var(--inv-encre); font:italic 900 19px/1 var(--f-titre); letter-spacing:.02em; }
.inv-bulle-act i { width:8px; height:8px; border-top:2.5px solid currentColor; border-right:2.5px solid currentColor; transform:rotate(45deg); }
.inv-bulle-act:active { transform:translateY(2px); background:var(--inv-ivoire-2); }
.inv-bulle-act:focus-visible { outline:3px solid var(--azur); outline-offset:2px; }
.screen.home:has(> #inv-journal:not([hidden])) .inv-bulle { visibility:hidden; }

/* ---------- retour 6 : UNE alerte compacte, danger mesuré (ivoire liseré de rouge, la perte en rouge), « Voir » ; calme une fois le journal lu ---------- */
.inv-attaque { gap:8px; min-height:44px; padding:0 5px 0 11px; border:2px solid var(--inv-bord); border-radius:22px; color:var(--inv-encre); background:var(--inv-ivoire);
  font:800 14px/1.1 var(--f-lecture); text-shadow:none; box-shadow:0 3px 0 #BFAE84, 0 6px 12px rgba(10,16,30,.35); }
.inv-attaque:active { box-shadow:0 1px 0 #BFAE84, 0 3px 8px rgba(10,16,30,.3); }
.inv-attaque .inv-attaque-ico { width:22px; }
.inv-attaque .inv-attaque-txt small { color:var(--inv-encre-2); }
.inv-attaque .inv-attaque-txt small::before { color:var(--inv-encre-2); }
.inv-attaque.pillee { border-color:var(--inv-rouge); background:#FFF6F2; box-shadow:0 3px 0 var(--inv-rouge-sombre), 0 6px 12px rgba(10,16,30,.38); }
.inv-attaque.pillee .inv-attaque-ico { color:var(--inv-rouge); }
.inv-attaque.pillee .inv-attaque-txt small { color:var(--inv-rouge-sombre); font-weight:900; }
.inv-attaque.tenue { border-color:#3C86D6; background:var(--inv-ivoire); color:var(--inv-encre); box-shadow:0 3px 0 #2F6FB8, 0 6px 12px rgba(10,16,30,.35); }
.inv-attaque.tenue .inv-attaque-txt small { color:#2E6B22; }
.inv-attaque-voir { flex:none; display:grid; place-items:center; height:32px; padding:0 14px; border-radius:16px; color:#fff; font:800 14px/1 var(--f-lecture);
  background:linear-gradient(#EA4C55, var(--inv-rouge)); box-shadow:0 2px 0 var(--inv-rouge-sombre); }
.inv-attaque.tenue .inv-attaque-voir { background:linear-gradient(var(--azur-haut), var(--azur)); box-shadow:0 2px 0 var(--azur-tranche); }
.inv-attaque.vue { padding:0 14px 0 11px; font-size:13.5px; background:rgba(251,247,236,.94); }
.inv-attaque.vue .inv-attaque-ico { width:19px; color:var(--inv-encre-2); }
.inv-attaque.vue .inv-attaque-txt small { font-size:13.5px; }
@media (max-height:700px) { .inv-attaque.pillee .inv-attaque-ico, .inv-attaque.tenue .inv-attaque-ico { display:block; } }
/* retour 2 : sous bouclier, la part hors banque est COUVERTE (hachures bleues), jamais un plein bancaire */

/* g3 d'Astra (journal) : adversaire, résultat chiffré, ancienneté ; boutons de même largeur, la vengeance d'honneur en second */
.inv-venger { min-width:104px; }
.inv-venger.inv-honneur { padding:0 12px; min-width:104px; font:800 14px/1.05 var(--f-texte); color:#0B4FA0; background:#fff; border:2px solid #3C86D6; box-shadow:0 3px 0 #9CC3EC; }
/* passe 2 : le nom du rival du journal n'est jamais coupé (deux lignes au besoin) ; solde nul sans jauge ; aucun « 0 » sous « Aucun bouclier » */
.inv-att .inv-a-nom { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }

.inv-bulle-lignes b:empty { display:none; }

/* ---------- passe Astra (après 1) ---------- */
/* sous bouclier, la barre paraît PLEINE : la banque en bleu plein, la part sous bouclier en bleu rayé dense (cause : l'écu ×N) */


/* la bulle : lien compact vers la Trésorerie, pas une seconde action principale */
.inv-bulle-act { width:auto; min-height:44px; margin:6px 0 -6px auto; padding:0 4px; border:0; background:none; font:800 14px/1 var(--f-lecture); letter-spacing:0; color:#0B4FA0; }
.inv-bulle-act:active { background:none; color:var(--inv-encre); }
.inv-bulle-lignes li[hidden], .inv-bulle-note[hidden] { display:none; }
/* l'alerte : les pertes en chiffres et icônes */
.inv-perte { display:inline-flex; align-items:center; gap:2px; margin-right:6px; }
.inv-perte:last-child { margin-right:0; }
#stage .inv-perte .picon { width:16px; height:16px; }
.inv-perte .rival-brique { width:17px; height:13px; }
/* lu : un bouton rond discret, à droite, à place fixe */
.inv-attaques:has(> .inv-attaque.vue) { justify-content:flex-end; }
.inv-attaque.vue { width:44px; height:44px; min-height:44px; padding:0; justify-content:center; border-radius:50%; gap:0; }
.inv-attaque.vue .inv-attaque-ico { width:22px; color:var(--inv-encre); }
/* journal : vengeances au même gabarit, plus étroites, pour laisser le nom entier */
.inv-venger, .inv-venger.inv-honneur { min-width:0; width:96px; height:40px; padding:0 8px; font:800 14px/1 var(--f-texte); }
/* écran court : l'ancienne règle masquait l'icône des pastilles ; le bouton rond du journal lu la garde (c'est tout son contenu) */
@media (max-height:700px) { .inv-attaque.vue .inv-attaque-ico { display:block; } .inv-attaques:has(> .inv-attaque.vue) { margin-bottom:6px; } }

/* ---------- seconde passe Astra ---------- */
/* jauge en trois segments pleins : banque bleu foncé, complément sous bouclier bleu clair, exposé ambre */


.inv-or[aria-expanded="true"] { outline:0; }
/* bulle : resserrée, valeurs aux couleurs des segments, écu grisé quand il n'y a aucun bouclier */
.inv-bulle { padding:9px 12px 8px; }
.inv-bulle-titre { margin-bottom:6px; }
.inv-bulle-lignes { gap:3px; }
.inv-bl-banque b { color:#0F55A8; }
.inv-bl-hors b { color:#3F8FDD; }
.inv-bulle-lignes li.expose b { color:#A35A00; }
.inv-bulle.sans-bouclier .inv-bl-bouclier .picon { filter:grayscale(1); opacity:.45; }
.inv-bulle-note { margin-top:5px; }
.inv-bulle-act { margin-top:2px; }
/* journal lu : une entrée compacte « Journal », à la place de l'alerte */
.inv-attaques:has(> .inv-attaque.vue) { justify-content:center; }
.inv-attaque.vue { width:auto; height:auto; min-height:44px; padding:0 16px 0 12px; gap:7px; border-radius:22px; }
.inv-attaque.vue .inv-attaque-txt b { font-size:14px; }
@media (max-height:700px) { .inv-attaques:has(> .inv-attaque.vue) { justify-content:flex-end; } }
/* journal : vengeances au même style, blasons plus petits */
.inv-venger.inv-honneur { color:#fff; background:linear-gradient(to bottom, var(--azur-haut), var(--azur) 55%, var(--azur-appui)); border:0; box-shadow:0 3px 0 var(--azur-tranche); }
.inv-att .inv-emb { width:30px; height:36px; }
/* ---------- D8 Honnêteté (21 octobre 2026) : « Contrôlée par le jeu » partout où paraît une Garnison simulée ----------
   Une même mention (pictogramme du fort et libellé) : en pastille sous le nom de la cible, en ligne dans le journal, le classement,
   le bilan et les cartes d'événement ; rien d'autre ne bouge. */
.jeu-tag { display:inline-flex; align-items:center; gap:4px; min-width:0; font:700 12px/1.15 var(--f-texte); color:var(--inv-encre-2); white-space:nowrap; }
.jeu-tag .picon { width:14px; flex:none; opacity:.9; }
.raid-panel .raid-jeu { display:flex; justify-content:center; margin:2px auto 0; font-size:12.5px; }
.raid-panel .raid-jeu[hidden] { display:none; }
.inv-att .jeu-tag { font-size:11.5px; }
.inv-att .jeu-tag .picon { width:13px; }
.ligue-jeu-note { flex:none; display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 2px; padding:6px 10px; border-radius:10px; background:#FFF3D0; color:#6B4A0E; font:700 12.5px/1.2 var(--f-texte); }
.ligue-jeu-note .picon { width:15px; }
.ligue-nom-l.simule { flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; }
.ligue-nom-l.simule .ligue-nom-t { max-width:100%; }
.ligue-nom-l .jeu-tag { font-size:11px; font-weight:600; color:#8A93A3; }
.ligue-nom-l .jeu-tag .picon { width:12px; }
.ev-c-titres .jeu-tag { margin-top:3px; }

/* ======================================================================================================================
   ÉCRAN DU RIVAL, refonte des interfaces (23 octobre 2026, docs/design/INTERFACE_GRAMMAIRE.md ; retours 2 et 3 de Bastien).
   Une scène (ta Cité floutée, jamais #canvas) et UNE feuille ivoire en bas : en haut de la scène le retour (glyphe nu) et le choix de difficulté (trois cibles côte à côte,
   butin dessous, la choisie soulignée de 3 dans sa couleur : vert, ambre, rouge) ; au centre l'insigne, le nom gothique et la ligue ;
   sur la feuille le butin en deux chiffres nus, « Détails » (un toucher les ouvre), la rangée des cinq champions (champion.css), Attaquer (le seul bouton plein)
   et « Changer de cibles » en lien. Les anciennes règles de l'écran (pastille Facile, carte Butin et ses tuiles, pilule « Contrôlée par le jeu », jauge de difficulté, carte Champion)
   ont été retirées de ce fichier. Les règles étroites suivent les règles de base.
   ====================================================================================================================== */
:root { --niv-facile:#3FAE55; --niv-moyenne:#E8A21E; --niv-difficile:#D8323C; }
.screen.panel.rival-screen { padding:0; overflow:hidden; background:#1B2A40; color:#fff; }
.screen.panel.rival-screen:not([hidden]) { display:flex; flex-direction:column; box-sizing:border-box; padding:calc(var(--safe-t) + 4px) 0 0; }
.rival-fond { position:absolute; inset:0; overflow:hidden; background:#1B2A40; pointer-events:none; }
.rival-fond-img { position:absolute; left:50%; top:50%; width:124%; height:124%; object-fit:cover; transform:translate(-50%, -50%); filter:blur(9px) saturate(.7) brightness(.55); }
.rival-fond::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,20,36,.7) 0%, rgba(12,20,36,.3) 38%, rgba(12,20,36,.34) 62%, rgba(12,20,36,.8) 100%); }
/* le retour : un glyphe nu de 24 dans une zone de 44 */
.rival-tete { position:absolute; left:calc(2px + var(--safe-l)); top:calc(var(--safe-t) + 4px); z-index:3; }
.rival-retour { width:44px; height:44px; padding:0; display:grid; place-items:center; border:0; border-radius:50%; background:none; box-shadow:none; color:#fff; -webkit-tap-highlight-color:transparent; }
.rival-retour .picon { width:24px; color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.rival-retour:active { opacity:.7; }
.rival-retour:focus-visible, .rival-niv:focus-visible, .rival-autre:focus-visible, .rival-plus:focus-visible { outline:3px solid var(--azur-haut); outline-offset:-2px; border-radius:10px; }
.rival-corps { position:relative; z-index:1; flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:0; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.rival-corps::-webkit-scrollbar { display:none; }
/* le choix de difficulté : libellé « Choisis ta cible », trois colonnes égales de 48 au moins, un filet de 1 sous la rangée et 3 dans la couleur du choisi, qui prend aussi une graisse plus forte
   (le butin n'est PAS dessous : il est propre à chaque garnison et ne suit pas la difficulté) */
.rival-niveaux { flex:none; margin:42px calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l)); }
.rival-niveaux[hidden] { display:none; }
.rival-niveaux-t { margin:0 0 2px; padding:0 2px; font:600 13px/1.2 var(--f-texte); color:rgba(255,255,255,.72); text-shadow:0 1px 2px rgba(0,0,0,.6); }
.rival-niveaux-piste { display:flex; }
.rival-niv { --c:var(--niv-moyenne); position:relative; flex:1 1 0; min-width:0; min-height:52px; padding:6px 2px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:0; border-radius:0; background:none; box-shadow:none; color:#fff; -webkit-tap-highlight-color:transparent; }
.rival-niv[hidden] { display:none; }
.rival-niv[data-niv="facile"] { --c:var(--niv-facile); }
.rival-niv[data-niv="difficile"] { --c:var(--niv-difficile); }
.rival-niv::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(255,255,255,.28); transition:height var(--t-apparition, .2s) var(--courbe, ease), background-color var(--t-apparition, .2s) var(--courbe, ease); }
.rival-niv.on::after { height:3px; background:var(--c); }
.rival-niv-lbl { max-width:100%; font:700 17px/1.1 var(--f-texte); color:rgba(255,255,255,.7); white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.rival-niv.on .rival-niv-lbl { color:#fff; font-weight:900; }
.rival-niv-etat { max-width:100%; display:inline-flex; align-items:center; gap:4px; font:700 13px/1 var(--f-texte); color:rgba(255,255,255,.62); white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.rival-niv-etat:empty { display:none; }
.rival-niv-etat b { font:inherit; }
.rival-niv-etat .picon { width:14px; flex:none; }
.rival-niv:active:not(:disabled) .rival-niv-lbl { opacity:.75; }
.rival-niv:disabled { cursor:default; }
.rival-niv.verrou .rival-niv-lbl { color:rgba(255,255,255,.5); }
/* l'identité : insigne, nom gothique, ligue (la mention « Contrôlée par le jeu » a quitté cet écran le 24 octobre 2026, retour de Bastien) */
.rival-ident { display:flex; flex-direction:column; align-items:center; gap:4px; margin:auto 12px; text-align:center; color:#fff; }
.rival-embleme { flex:none; width:56px; height:66px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.rival-embleme svg { width:100%; height:100%; display:block; }
.rival-nom { max-width:100%; margin:0; font:800 26px/1.05 'Grenze Gotisch', var(--f-titre); color:#fff; white-space:normal; overflow-wrap:anywhere; text-wrap:balance; text-shadow:0 2px 0 rgba(0,0,0,.5), 0 0 14px rgba(0,0,0,.45); }
.rival-sous { margin:0; display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:5px 10px; min-width:0; color:#E3ECF8; font:700 14px/1.1 var(--f-texte); text-shadow:0 1px 2px rgba(0,0,0,.6); }
.rival-ligue::before { content:''; display:inline-block; width:12px; height:14px; margin:0 5px -2px 0; background:#E3ECF8; -webkit-mask:var(--ic-bouclier) center/contain no-repeat; mask:var(--ic-bouclier) center/contain no-repeat; }
.rival-puissance { display:none; }
.rival-vtag { margin:2px 0 0; display:flex; align-items:center; justify-content:center; gap:6px; color:#FFC2C5; font:800 14px/1.15 var(--f-texte); text-shadow:0 1px 3px rgba(0,0,0,.7); }
.rival-vtag .picon { width:16px; color:#FF8A8F; }
.rival-vtag[hidden] { display:none; }
.rival-bouclier { position:static; margin:2px 0 0; display:inline-flex; align-items:center; gap:6px; color:#CFE4FF; font:800 15px/1.15 var(--f-texte); text-shadow:0 1px 3px rgba(0,0,0,.7); }
.rival-bouclier .picon { width:18px; color:#7DB8FF; }
.rival-bouclier[hidden] { display:none; }
/* la feuille : l'unique surface, ivoire, collée au bas ; deux niveaux au plus (elle et ce qu'on touche dessus) */
.rival-carte { position:relative; flex:none; margin-top:12px; padding:14px calc(16px + var(--safe-r)) calc(var(--safe-b) + 8px) calc(16px + var(--safe-l)); border-radius:22px 22px 0 0;
  background:var(--inv-ivoire); color:var(--inv-encre); box-shadow:0 -8px 24px rgba(8,20,48,.4); border:0; }
.rival-h { margin:0 0 4px; font:700 14px/1.2 var(--f-texte); letter-spacing:0; text-transform:none; color:var(--inv-encre-2); }
.rival-bonus { display:none; }
.rival-butin { display:flex; align-items:center; gap:26px; }
.rival-gain { display:inline-flex; align-items:center; gap:8px; min-width:0; height:40px; padding:0; border:0; border-radius:0; background:none; }
.rival-gain[hidden] { display:none; }
.rival-gain .picon { width:30px; color:var(--or); }
.rival-gain b { font:italic 900 32px/1 var(--f-titre); color:var(--inv-encre); }
.rival-gain .rival-brique { width:28px; height:21px; }
.rival-carte.protegee .rival-butin { opacity:.45; }
/* « Détails » : une ligne qui ouvre le détail (butin, bonus du jour, Puissances), séparée d'un filet de 1 */
.rival-plus { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; margin:8px 0 0; padding:0; border:0; border-top:1px solid rgba(18,35,63,.12); border-radius:0; background:none; box-shadow:none;
  font:700 15px/1.2 var(--f-texte); color:var(--inv-encre); text-align:left; }
.rival-plus[hidden] { display:none; }
.rival-plus .picon { width:22px; flex:none; color:var(--inv-encre-2); }   /* rouge = l'ennemi : « Détails » n'est plus une ligne de garnison */
.rival-plus span:not(.picon) { flex:1; min-width:0; color:var(--inv-encre); font-weight:800; }
.rival-plus-chev { flex:none; width:9px; height:9px; margin:-4px 4px 0 0; border-right:2.5px solid var(--inv-encre-2); border-bottom:2.5px solid var(--inv-encre-2); transform:rotate(45deg); }
.rival-plus.ouvert .rival-plus-chev { margin-top:4px; transform:rotate(-135deg); }
.rival-detail { display:flex; flex-direction:column; gap:8px; margin:0; padding:2px 0 6px; }
.rival-detail[hidden] { display:none; }
.rival-note { margin:0; font:600 14px/1.25 var(--f-texte); color:var(--inv-encre-2); }
.rival-note[hidden] { display:none; }
.rival-detail .rival-faveur:not([hidden]) { display:flex; margin:0; }
.rival-detail .rival-faveur .picon { color:#B8821C; }
.rival-puiss { display:flex; flex-direction:column; gap:3px; margin:0; }
.rival-compare { margin:0 0 1px; font:700 14px/1.2 var(--f-texte); color:var(--inv-encre); }
/* la comparaison : deux lignes étiquetées, l'adversaire en rouge, toi en azur, sur UNE échelle (la plus grande Puissance remplit la barre) */
.rival-ligne { display:grid; grid-template-columns:78px minmax(0, 1fr) 46px; align-items:center; gap:8px; margin:0; min-height:22px; }
.rival-lbl { font:800 13px/1 var(--f-texte); color:var(--inv-encre-2); }
.rival-ligne.rv .rival-lbl, .rival-ligne.rv b { color:var(--inv-rouge-sombre); }
.rival-ligne.mo .rival-lbl, .rival-ligne.mo b { color:#0B4FB3; }
.rival-ligne b { font:italic 900 21px/1 var(--f-titre); text-align:right; }
.rival-barre { position:relative; display:block; height:10px; border-radius:5px; background:#E4DAC0; overflow:hidden; }
.rival-barre i { position:absolute; left:0; top:0; bottom:0; border-radius:5px; transition:width var(--t-apparition) var(--courbe); }
.rival-barre .rv { background:linear-gradient(90deg, #E04B52, var(--inv-rouge)); }
.rival-barre .mo { background:linear-gradient(90deg, var(--azur-haut), var(--azur)); }
/* raid d'événement (seigneur, fête) : trois lignes courtes à la place d'un paragraphe, le conseil de garnison en première ligne et en gras */
.rival-regles { list-style:none; margin:6px 0 2px; padding:0; display:flex; flex-direction:column; gap:3px; }
.rival-regles[hidden] { display:none; }
.rival-regles li { position:relative; padding-left:14px; font:600 14px/1.25 var(--f-texte); color:var(--inv-encre-2); }
.rival-regles li::before { content:''; position:absolute; left:2px; top:.5em; width:6px; height:6px; border-radius:50%; background:var(--inv-rouge); }
.rival-regles li.conseil { padding-left:0; }
.rival-regles li.conseil::before { content:none; }
.rival-regles li.conseil b { font:800 15px/1.25 var(--f-texte); color:var(--inv-rouge-sombre); }
/* une seule action pleine : Attaquer ; « Changer de cibles » en lien ; sans cible attaquable (protégée seule, plus de cible) le lien prend la commande principale */
.rival-actions { position:relative; z-index:1; flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:10px; }
.rival-attaquer { width:100%; min-height:56px; }
.rival-attaquer .picon { width:28px; }
.rival-attaquer .command-copy strong { font-size:32px; }
.rival-attaquer .command-copy small { color:#DFF4FF; }
.menu-command.primary.rival-attaquer.defi { background:linear-gradient(#F0626A, var(--inv-rouge) 55%, var(--inv-rouge-sombre)); border:2px solid #6D0F18; box-shadow:0 4px 0 #6D0F18, 0 7px 14px rgba(110,10,20,.35), inset 0 2px 0 rgba(255,255,255,.4); }
.rival-attaquer.defi .command-copy small { color:#FFE3E0; }
.menu-command.primary.rival-attaquer.defi:active { transform:translateY(3px); box-shadow:0 1px 0 #6D0F18, inset 0 2px 0 rgba(255,255,255,.4); }
.rival-autre { min-height:44px; padding:0 18px; border:0; border-radius:10px; background:none; box-shadow:none; color:var(--inv-encre-2); font:600 14px/1 var(--f-texte); text-decoration:underline; text-underline-offset:3px; }
.rival-autre:active { opacity:.6; }
.rival-actions.sans-attaque .rival-attaquer { display:none; }
.rival-actions.sans-attaque .rival-autre { order:-1; width:100%; min-height:56px; border-radius:14px; text-decoration:none; color:#fff; font:italic 900 26px/1 var(--f-titre); letter-spacing:.02em;
  background:linear-gradient(to bottom, var(--azur-haut), var(--azur) 55%, var(--azur-appui)); box-shadow:0 4px 0 var(--azur-tranche), 0 8px 18px rgba(8,20,48,.3); }
.rival-actions.sans-attaque .rival-autre:active { transform:translateY(2px); opacity:1; }
/* écrans courts (360 x 640) : la scène se resserre, la feuille garde ses cibles de toucher */
@media (max-height:700px) {
  .rival-niveaux { margin-top:40px; }
  .rival-niv { min-height:48px; padding-bottom:8px; }
  .rival-corps { gap:8px; }
  .rival-embleme { width:48px; height:57px; }
  .rival-nom { font-size:24px; }
  .rival-carte { padding-top:10px; }
  .rival-note { display:none; }
  .rival-detail .rival-note:not([hidden]) { display:block; }
  .rival-attaquer { min-height:52px; }
  .rival-attaquer .command-copy strong { font-size:30px; }
}
@media (min-height:701px) { .rival-embleme { width:64px; height:75px; } }