/* Accueil de Cité, menu Attaquer et fiche de bâtiment : surcouche de la famille D « Arcade premium » (6 octobre 2026).
   Retour de Bastien : les plaques nuit inclinées, les filets et lueurs azur, l'or et le corail reviennent partout ; la
   couche ivoire arrondie (classes home-cap26 et nav-cap26) est retirée. Le socle électrique vit dans arcmarch.css : cette
   feuille ne garde que les décisions de contenu de l'accueil, puis dessine ce qui n'avait jamais existé en électrique.
   Elle charge APRÈS arcmarch.css : toute règle d'adaptation étroite est posée en fin de feuille, après sa règle de base. */

/* ---------------------------------------------------------------- accueil : décisions de contenu */
/* Le menu Attaquer porte les Arènes ; le sous-titre de niveau se lit dans ce menu ; les crans du Donjon doublaient l'aspect. */
.home-arenes, .bchip .fort-crans { display:none; }
/* L'ancienne fiche flottante et sa rangée de tuiles ne s'ouvrent plus à l'accueil (la fiche de bâtiment les remplace). */
.screen.home .ban-row, .screen.home #bcard { display:none; }
/* Le « + » d'une bourse suit son attribut hidden (Boutique fermée) : le socle le forçait en grille et l'affichait toujours.
   Sa zone de toucher (44 points, calque ::after du socle) passe au-dessus de la bourse voisine au lieu de s'y glisser dessous. */
.bourse-plus[hidden] { display:none; }
/* Boutique encore fermée (case de la barre verrouillée par hud.js) : pas de « + » sur des bourses à zéro. */
#stage:has(> #nav-rail [data-nav="shop"].locked) .bourse-plus { display:none; }
.home-res .bourse-pill:first-child { z-index:1; }
/* Le coffre attend sur la place de la Cité, et seulement quand il est prêt : il ne passe plus sous le cartouche d'objectif. */
.home-rail { left:calc(50% + 14px); right:auto; top:calc(46% - 30px); bottom:auto; }
.home-rail:has(#home-chest:not(.ready)) { display:none; }
/* Les voiles nuit portent le haut et le pied sans éteindre la Cité peinte : plus courts et plus clairs que sur le socle. */
.screen.home::before { height:calc(var(--safe-t) + 86px); background:linear-gradient(to bottom, rgba(2,10,27,.72), rgba(2,10,27,.34) 55%, rgba(2,10,27,0)); }
.screen.home::after { height:calc(var(--nav-h) + 156px); background:linear-gradient(to top, rgba(2,8,22,.92), rgba(2,8,22,.6) 46%, rgba(2,8,22,0)); }
/* Pastilles de bâtiment : le disque à anneau cyan de la maquette D, plus franc sur la Cité peinte (32 points, anneau de
   2 points, lueur) ; un bâtiment fermé porte un cadenas CORAIL, comme les régions de la carte du Monde. La cible reste 56 × 44. */
.bchip .mark { width:32px; height:32px; background:radial-gradient(circle at 50% 30%, #1A5A96, #082445 62%, #051630);
  box-shadow:inset 0 0 0 2px #5BD0FF, inset 0 0 0 3.5px rgba(6,40,90,.55), 0 0 0 1.5px rgba(3,12,28,.75), 0 0 11px rgba(0,145,255,.6), 0 3px 6px rgba(0,4,14,.6); }
.bchip .mark .picon { width:18px; }
.bchip.on .mark { box-shadow:inset 0 0 0 2px #D4F5FF, inset 0 0 0 3.5px rgba(6,40,90,.55), 0 0 0 1.5px rgba(3,12,28,.75), 0 0 15px 1px rgba(40,170,255,.9), 0 3px 6px rgba(0,4,14,.6); }
.bchip.locked .mark { color:#C2D6EA; background:linear-gradient(180deg, #173D60, #081A30); box-shadow:inset 0 0 0 2px #5687AD, 0 0 0 1.5px rgba(3,12,28,.75), 0 3px 6px rgba(0,4,14,.6); }
/* Un bâtiment fermé n'est pas un danger : cadenas bleu gris, discret (le corail reste aux menaces et aux blocages actifs). */
.bchip .lock-sign { top:19px; left:31px; width:14px; height:14px; background:linear-gradient(180deg, #6F8FB0, #3B5878); color:#EAF2FA; box-shadow:0 0 0 1.5px #091426; }
.bchip.locked .mark .picon { opacity:.75; }
/* Chaque pastille dit son bâtiment : une étiquette inclinée sous le disque (data-name, posé par hud.js). Franche pour ce qui
   s'améliore maintenant, discrète pour ce qui est fermé. Elle remplace la bulle qui ne paraissait qu'au focus clavier. */
.bchip::after, .bchip:focus-visible::after { content:attr(data-name); position:absolute; left:50%; top:35px; bottom:auto; transform:translateX(-50%); z-index:0;
  padding:2px 9px 3px; border-radius:0; white-space:nowrap; pointer-events:none; clip-path:polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  font:italic 800 var(--fs-legende)/1 var(--f-titre); letter-spacing:.01em; color:var(--blanc); text-shadow:0 1px 2px rgba(0,5,17,.9);
  background:linear-gradient(180deg, rgba(10,40,84,.94), rgba(4,16,36,.94)); box-shadow:none; }
.bchip.on::after { background:linear-gradient(180deg, #2EA2FF, #0A66E0 60%, #0558D4); }
.bchip.locked::after { color:#AFC3D8; background:rgba(4,14,30,.7); }
.bchip:focus-visible::after { background:linear-gradient(180deg, #FFE27A, #F2B93A); color:var(--or-texte); text-shadow:none; }
/* Bourses masquées de leur « + » (Boutique fermée) : la plaque d'époque ne s'étire pas sur toute la largeur. */
.home-profil-copy { max-width:206px; }
/* Plaque d'époque : avec des bourses à six chiffres elle rétrécit sous la largeur de son libellé, que le socle coupait par
   des points de suspension. Mesurée comme conteneur, elle passe alors son libellé sur deux lignes (rien n'est coupé). */
.home-epoque { container-type:inline-size; }
@container (max-width:104px) {
  .home-epoque #home-epoque-lbl { white-space:normal; overflow:visible; text-overflow:clip; line-height:1; text-wrap:balance; }
}
/* « Attaquer » seul sur sa plaque : le mot et les épées centrés, à la taille de la maquette D. */
#home-battle .battle-copy { align-items:center; }
/* Garnison qui attend au portail (tranche « cycle de vie ») : un écusson à filet or dans une ZONE RÉSERVÉE au-dessus du
   bouton (plus à cheval sur son coin). Il dit les mêmes mots que le menu Attaquer : « Garnison : +12 renforts au départ ».
   Le cartouche d'objectif monte d'autant (progression.css) : rien ne se chevauche. */





/* Haut d'écran moins serré (troisième tour) : la plaque d'époque quitte l'en-tête. L'horizon de la Cité se lit dans le
   cartouche d'objectif, en troisième ligne : UN seul message d'objectif à la fois. Restent le heaume du profil et les bourses. */
.home-head .home-epoque { display:none; }

/* ---------------------------------------------------------------- menu Attaquer : feuille basse (troisième tour)
   Une feuille RÉELLEMENT basse : son haut se pose vers 45 % de l'écran à 360 × 780, la Cité peinte reste lisible au-dessus
   (voile léger, ses pastilles se taisent le temps du choix : rien n'est coupé par l'arête, aucun libellé ne transparaît).
   UNE hiérarchie : le contrat de campagne (plaque bleue), dedans la MENACE dominante en corail (l'emblème peint du clan
   qui déborde de sa plaque, son nom en grand, ce qu'elle fait), le terrain et les renforts en lignes compactes, puis
   « Jouer », le seul bleu épais à faisceaux et le plus grand mot de la feuille. Les Arènes sont une plaque seconde à arête
   fine ; le retour est un bouton rond à cheval sur l'arête haute. */
.cap26-attack-menu { position:absolute; inset:0; z-index:12; margin:0; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; gap:7px;
  padding:0 var(--gout-r) calc(var(--nav-h) + 8px) var(--gout-l); color:var(--blanc);
  background:linear-gradient(to top, rgba(2,8,22,.34) 0, rgba(2,10,27,.16) 55%, rgba(2,10,27,.04) 100%); }
.cap26-attack-menu[hidden] { display:none; }
/* la Cité reste lisible, ses pastilles et son coffre se taisent pendant le choix (le conteneur entier : rien n'est coupé) */
.screen.home:has(> #cap26-attack-menu:not([hidden])) :is(#camp-chips, .home-rail) { visibility:hidden; }
.attack-head { position:relative; display:flex; align-items:flex-end; min-height:22px; padding:14px 56px 0 4px; }
/* le panneau : un calque de l'en-tête, qui descend jusque sous la barre ; son bord haut monte de 14 points vers la droite */
.attack-head::before { content:''; position:absolute; left:calc(-1 * var(--gout-l)); right:calc(-1 * var(--gout-r)); top:0; height:100vh; z-index:-2; pointer-events:none;
  clip-path:polygon(0 14px, 100% 0, 100% 100%, 0 100%);
  background:radial-gradient(90% 150px at 18% 0, rgba(24,124,255,.34), rgba(24,124,255,0)), linear-gradient(165deg, rgba(9,38,80,.985), rgba(3,14,34,.985) 46%, rgba(2,9,24,.99)); }
.attack-head::after { content:''; position:absolute; left:calc(-1 * var(--gout-l)); right:calc(-1 * var(--gout-r)); top:-6px; height:26px; z-index:-1; pointer-events:none;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 26' preserveAspectRatio='none'><g fill='none' stroke='%2334BCFF'><path d='M0 20 L100 6' stroke-width='10' stroke-opacity='.2' vector-effect='non-scaling-stroke'/><path d='M0 20 L100 6' stroke-width='2' stroke='%2362D4FF' vector-effect='non-scaling-stroke'/></g></svg>") 0 0 / 100% 100% no-repeat; }
.attack-head h2 { margin:0; font:italic 900 22px/1 var(--f-titre); color:var(--blanc); text-shadow:0 2px 0 rgba(0,40,120,.8), 0 0 14px rgba(120,200,255,.35); }
/* le retour : un bouton rond de la famille, à cheval sur l'arête haute de la feuille (dernier dans le DOM et à la tabulation,
   premier à l'œil : l'ordre visuel est posé par `order`, le chevauchement par une marge négative) */
.cap26-attack-close.round-btn { order:-1; align-self:flex-end; z-index:2; margin:0 2px -41px 0; background:none; box-shadow:none; }
/* la cible reste de 44 points ; le disque visible est plus petit et sans lueur : il ne dispute rien à la préparation */
.cap26-attack-close.round-btn::before { content:''; position:absolute; inset:5px; z-index:-1; border-radius:50%; background:radial-gradient(circle at 50% 34%, #12355D, #051329 78%); box-shadow:inset 0 0 0 1.5px #4A9FD8, 0 0 0 2px rgba(3,12,28,.8), 0 2px 4px rgba(0,4,14,.5); }
.cap26-attack-close.round-btn .picon { width:15px; color:#BFE9FF; }
.cap26-attack-close.round-btn:focus-visible { outline:3px solid var(--or-clair); outline-offset:3px; }

/* plaque de contrat (base : les Arènes) : une information qui s'ouvre, arête fine, pas de tranche épaisse */
.attack-choix { position:relative; isolation:isolate; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; column-gap:10px; width:100%; box-sizing:border-box;
  min-height:46px; padding:4px 8px 6px 12px; text-align:left; color:var(--blanc); transition:transform var(--t-appui) var(--courbe); }
.attack-choix::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:3px; transform:skewX(calc(var(--biais) / 2));
  background:linear-gradient(120deg, #0F3566, #0A2550 46%, #071A38);
  box-shadow:inset 3px 0 0 #22B8FF, inset 0 1px 0 rgba(140,220,255,.45), inset 0 0 0 1px rgba(60,140,210,.6), 0 3px 0 #03122B, 0 6px 10px rgba(0,5,17,.45);
  transition:filter var(--t-appui); }
.attack-choix:active { transform:translateY(3px); }
.attack-choix:active::before { filter:brightness(.84); }
.attack-choix:focus-visible { outline:none; }
.attack-choix:focus-visible::before { outline:3px solid var(--or-clair); outline-offset:3px; }
/* le sceau : losange à lueur, le pictogramme reste droit */
.attack-sceau { position:relative; isolation:isolate; display:grid; place-items:center; width:34px; height:34px; }
.attack-sceau::before { content:''; position:absolute; inset:5px; z-index:-1; border-radius:4px; transform:rotate(45deg);
  background:linear-gradient(145deg, #10406C, #061A31); box-shadow:inset 0 0 0 1.5px #5BD0FF, 0 0 9px rgba(0,133,255,.45); }
.attack-sceau .picon { width:17px; color:#9FE6FF; }
.attack-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.attack-copy strong { font:italic 900 20px/1 var(--f-titre); color:var(--blanc); text-shadow:0 2px 1px rgba(0,12,40,.55); }
.attack-copy small { font:600 13px/1.15 var(--f-texte); color:#9EDFFF; text-wrap:balance; }
/* les Arènes ouvrent un écran : un chevron, pas un second bouton bleu (une seule action évidente par feuille) */



/* la campagne domine : face bleu électrique, sceau plein, puis la lecture, puis « Jouer » sur toute la largeur */
.attack-choix-campagne { grid-template-columns:42px minmax(0,1fr); row-gap:6px; padding:8px 12px 9px 14px; }
.attack-choix-campagne::before { background:radial-gradient(70% 90px at 0 0, rgba(60,170,255,.38), rgba(60,170,255,0)), linear-gradient(160deg, #124C9F, #0A2E6C 42%, #061C49);
  box-shadow:inset 4px 0 0 #6FE0FF, inset 0 1px 0 rgba(155,239,255,.8), inset 0 0 0 1px #3FAEEA, 0 0 14px rgba(30,150,255,.4), 0 8px 16px rgba(0,5,17,.55); }
.attack-choix-campagne .attack-sceau { width:42px; height:42px; }
.attack-choix-campagne .attack-sceau::before { inset:6px; background:linear-gradient(140deg, #5FD8FF, #0A78F0 58%, #043E9A);
  box-shadow:inset 0 0 0 2px #D4F5FF, 0 0 14px rgba(40,170,255,.9), 0 3px 6px rgba(0,5,17,.5); }
.attack-choix-campagne .attack-sceau .picon { width:22px; color:var(--blanc); filter:drop-shadow(0 1px 1px rgba(0,30,110,.7)); }
.attack-choix-campagne .attack-copy strong { font-size:22px; text-shadow:0 3px 0 rgba(0,40,120,.8), 0 0 14px rgba(120,200,255,.3); }
.attack-choix-campagne .attack-copy small { font:italic 700 15px/1.1 var(--f-titre); color:#CFEEFF; text-wrap:wrap; }
/* « Jouer » : le principal à faisceaux, en pied de contrat, le plus grand mot et la plus grande surface vive de la feuille */
.attack-choix-campagne > b { grid-column:1 / -1; position:relative; isolation:isolate; display:grid; place-items:center; box-sizing:border-box; min-height:58px; padding:0 12px 7px;
  font:italic 900 38px/1 var(--f-titre); letter-spacing:.01em; color:var(--blanc); text-shadow:0 3px 0 rgba(0,30,110,.6), 0 0 14px rgba(160,230,255,.35); }
.attack-choix-campagne > b::before { content:''; position:absolute; inset:0 2px 7px; z-index:-1; border-radius:3px; transform:skewX(var(--biais));
  background:linear-gradient(90deg, rgba(230,251,255,.85), rgba(230,251,255,0)) left 6px bottom 22% / 26% 2px no-repeat,
    linear-gradient(270deg, rgba(230,251,255,.85), rgba(230,251,255,0)) right 6px top 22% / 26% 2px no-repeat,
    linear-gradient(180deg, rgba(150,230,255,.16) 0 42%, rgba(150,230,255,0) 44%), linear-gradient(180deg, #46B6FF, #1C88F4 30%, #0A66E0 55%, #0558D4);
  box-shadow:inset 0 2px 0 #B6F0FF, inset 0 0 0 1px #7FDFFF, 0 1px 0 #03307F, 0 7px 0 #0443BD, 0 0 18px rgba(70,180,255,.8); }
/* Lecture de la bataille. La MENACE : une plaque corail, l'emblème peint du clan qui en déborde, « Ennemi » en légende,
   son nom en grand, ce qu'elle fait dessous. Le terrain et les renforts : deux lignes compactes sans cadre (azur pour le
   terrain, or pour ce que tu apportes). */
.attack-lecture { grid-column:1 / -1; display:flex; flex-direction:column; gap:5px; min-width:0; }
.attack-lecture[hidden], .attack-lecture [hidden] { display:none; }
/* la tranche « cycle de vie » peint la garnison en vert sur le span lui-même (arcmarch.css) : ici rien sur le span */
#cap26-attack-menu .attack-lecture > span { background:none; box-shadow:none; border-radius:0; }
.attack-ligne { min-width:0; display:flex; flex-direction:column; gap:2px; }
.attack-ligne > small:empty { display:none; }
.attack-menace { position:relative; isolation:isolate; display:grid; grid-template-columns:62px minmax(0,1fr); align-items:center; column-gap:10px; min-height:56px; margin-top:2px; padding:3px 12px 4px 6px; box-sizing:border-box; }
.attack-menace:has(#attack-ennemi[hidden]) { display:none; }
.attack-menace::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:3px; transform:skewX(var(--biais));
  background:radial-gradient(56% 130% at 9% 50%, rgba(255,150,90,.55), rgba(255,110,60,0)), linear-gradient(120deg, #7A2410, #4A150C 50%, #2A0B10);
  box-shadow:inset 0 1px 0 rgba(255,200,170,.6), inset 0 0 0 1.5px #FF7A52, 0 2px 0 #1A0604, 0 0 14px rgba(255,100,60,.4); }
.attack-menace-sceau { position:relative; display:grid; place-items:center; width:62px; height:50px; }
/* l'emblème peint déborde de la plaque (haut et bas) : c'est lui le portrait de la bataille */
#attack-ennemi-art { display:block; width:68px; height:68px; max-width:none; margin:-9px -3px; object-fit:contain; pointer-events:none; filter:drop-shadow(0 3px 0 rgba(30,6,2,.75)) drop-shadow(0 0 7px rgba(255,140,90,.5)); }
#attack-ennemi-art[hidden] { display:none; }
/* repli (trait sans emblème peint) : le pictogramme dans un losange braise */
#attack-ennemi-art:not([hidden]) + .picon { display:none; }
.attack-menace-sceau > .picon { width:26px; color:#FFD9CB; }
.attack-kicker { font:800 var(--fs-legende)/1 var(--f-texte); font-style:normal; letter-spacing:.13em; text-transform:uppercase; color:#FF9E7E; }
#attack-ennemi { font:italic 900 27px/1 var(--f-titre); color:#FFF1EA; text-shadow:0 2px 0 rgba(90,20,5,.8); white-space:nowrap; }
#attack-ennemi-effet { font:600 13px/1.15 var(--f-texte); color:#FFCDBB; text-wrap:balance; }
.attack-terrain { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:center; column-gap:10px; padding:0 4px 0 10px; }
.attack-terrain:has(#attack-terrain[hidden]) { display:none; }
.attack-terrain > .picon { width:20px; color:#6FE0FF; }
#attack-terrain { font:italic 700 15px/1 var(--f-titre); color:#CFEEFF; white-space:nowrap; }
#attack-terrain-effet { font:600 var(--fs-legende)/1.15 var(--f-texte); color:#9EDFFF; text-wrap:balance; }
#cap26-attack-menu .attack-lecture > .attack-garnison { display:flex; align-items:center; gap:10px; padding:0 4px 0 10px; font:italic 800 16px/1 var(--f-titre); color:var(--or-clair); white-space:nowrap; text-shadow:0 1px 2px rgba(0,5,17,.7); }
#cap26-attack-menu .attack-lecture > .attack-garnison[hidden] { display:none; }
.attack-garnison::before { content:''; flex:none; width:20px; height:20px; background:var(--or); -webkit-mask:var(--ic-heaume) center / contain no-repeat; mask:var(--ic-heaume) center / contain no-repeat; }
/* Un conseil qui paraît pendant le choix se pose sur la Cité, jamais sur un contrat. */
#stage:has(#cap26-attack-menu:not([hidden])) > #toast.guide { top:calc(var(--safe-t) + 76px); bottom:auto; }
.screen.building .building-epoque[hidden] { display:none; }
/* au plafond : « Au maximum » seul, centré, sans pièce ni prix */
.screen.building .building-buy.plafond .price[hidden] { display:none; }
.screen.building .building-buy.plafond { justify-content:center; }
/* second jet : au plafond de PUISSANCE le pied le dit en petit et s'efface  */
.screen.building .building-buy.plafond { min-height:46px; }
.screen.building .building-buy.plafond .cmd-main { font-size:22px; }
/* Le nom de la statistique est une étiquette (petites capitales azur), pas une phrase qui double la description. */
.screen.building .building-copy .stat { font:800 var(--fs-legende)/1 var(--f-texte); letter-spacing:.13em; text-transform:uppercase; color:#8FDFFF; }
/* Les cinq troupes du Ban tiennent sur UNE rangée : plus de seconde rangée coupée au-dessus du pied d'achat. */
.screen.building .building-ban { grid-template-columns:repeat(5, minmax(0,1fr)); gap:4px; }
.screen.building .building-ban button { min-height:54px; padding:4px 1px 8px; font-size:13px; letter-spacing:-.01em; }
.screen.building .building-ban button .picon { width:18px; }
.screen.building .building-scroll { gap:8px; }
.screen.building .building-sheet { max-height:70%; }
.screen.building .building-heading { flex-wrap:wrap; gap:5px 12px; }
.screen.building .building-level { white-space:normal; font-size:18px; }
.screen.building .building-epoque { line-height:1.4; }
.screen.building .effet-apres { font-size:clamp(36px,12vw,54px); }
.screen.building .effet-avant { font-size:22px; }
.screen.building .effet-fleche { width:30px; }

/* ---------------------------------------------------------------- barre du bas et menus : restes hors famille */
/* Boutique verrouillée : le glyphe grisé et un petit cadenas (refonte-cite.css) ; plus de « Niv 4 » en or. */
/* Emblèmes de la Boutique et des Missions : la tuile brune de l'ancienne direction devient une tuile nuit à filet azur. */
.mission .mission-emblem { border-radius:4px; background:linear-gradient(150deg, #10406C, #061A31); color:#BFE9FF;
  box-shadow:inset 0 1px 0 rgba(150,225,255,.55), inset 0 0 0 1.5px #3AA9F2, 0 0 9px rgba(0,133,255,.3); }

/* ---------------------------------------------------------------- menu Attaquer : corrections du jugement (second jet)
   MOINS DE CADRES : la campagne n'est plus une carte encadrée posée dans la feuille (contour externe + contour ennemi +
   bouton + socle). Son titre, la menace et « Jouer » vivent directement sur la feuille : il reste la plaque corail de la
   menace et le bouton bleu. LA GARNISON rejoint « Jouer », en sous-titre du bouton (ce que tu emmènes en jouant) : une ligne
   de moins, la feuille descend d'autant et la Cité reste lisible au-dessus. */
.attack-choix-campagne { padding:2px 2px 4px; row-gap:7px; }
.attack-choix-campagne::before { background:none; box-shadow:none; }
.attack-choix-campagne:focus-visible::before { outline:none; }
.attack-choix-campagne:focus-visible > b::before { outline:3px solid var(--or-clair); outline-offset:3px; }
.attack-choix-campagne:active { transform:none; }
.attack-choix-campagne:active > b { transform:translateY(4px); }
.attack-choix-campagne:active > b::before { filter:brightness(.86); box-shadow:inset 0 2px 0 #B6F0FF, inset 0 0 0 1px #7FDFFF, 0 1px 0 #03307F, 0 3px 0 #0443BD, 0 0 12px rgba(70,180,255,.6); }
.attack-choix-campagne > b { min-height:62px; font-size:40px; transition:transform var(--t-appui) var(--courbe); }
.attack-menace { margin-top:0; }
#cap26-attack-menu .attack-lecture > .attack-garnison { position:absolute; left:0; right:0; bottom:19px; z-index:1; justify-content:center; gap:7px; padding:0; pointer-events:none;
  font:italic 800 15px/1 var(--f-titre); color:#FFF3C4; text-shadow:0 1px 2px rgba(0,30,110,.8); }
.attack-garnison::before { width:16px; height:16px; background:#FFE27A; }
.attack-choix-campagne:has(.attack-garnison:not([hidden])) > b { min-height:70px; padding-bottom:27px; font-size:36px; }
.attack-choix-campagne:has(.attack-garnison:not([hidden])) > b::before { background:linear-gradient(270deg, rgba(230,251,255,.85), rgba(230,251,255,0)) right 6px top 22% / 26% 2px no-repeat,
    linear-gradient(180deg, rgba(150,230,255,.16) 0 42%, rgba(150,230,255,0) 44%), linear-gradient(180deg, #46B6FF, #1C88F4 30%, #0A66E0 55%, #0558D4); }

/* contraste (revue fonctionnelle : « Niv. 10 » à 4,15) : une troupe pas encore offerte reste lisible, la tuile n'est plus
   voilée en bloc ; seul son pictogramme s'éteint */
.building-ban button.locked { opacity:1; color:#D6E6F7; }
.building-ban button.locked .picon { opacity:.6; }

/* accueil, haut d'écran : les « + » des bourses ne pèsent plus autant que les bourses (carré plus petit, cobalt sans lueur) ;
   la zone de toucher de 44 points du socle est inchangée */
.screen.home .bourse-plus::before { width:17px; height:17px; margin:-8.5px 0 0 -8.5px; background:linear-gradient(180deg, #1C7FE8, #0A4FB8); box-shadow:inset 0 1px 0 rgba(160,230,255,.8), 0 1px 0 #03307F; }
.screen.home .bourse-plus > span { font-size:15px; margin-top:-1px; }

/* retouches du second jugement : « À l'attaque ! » devient une légende au-dessus du mode joué (deux titres ne se disputent
   plus la feuille) ; la description de la menace respire ; un achat impossible éteint aussi son prix */
.attack-head h2 { font:800 var(--fs-legende)/1 var(--f-texte); font-style:normal; letter-spacing:.13em; text-transform:uppercase; color:#8FDFFF; text-shadow:none; }
.attack-menace { padding-bottom:6px; }
.screen.building .building-buy:disabled .price { opacity:.62; }

/* ---------------------------------------------------------------- adaptations (toujours après les règles de base ci-dessus) */
@media (max-width:374px) {
  /* le coffre ne mord plus sur la pastille du Portail ; la plaque d'époque reste à la taille de légende (12 points) */
  .home-rail { left:calc(50% + 4px); }
  .home-epoque-copy { font-size:var(--fs-legende); }
}
/* La plaque d'époque porte l'horizon de la Cité : dès 390 points de large, son libellé passe de 12 à 13 points. */
@media (min-width:390px) {
  .home-epoque-copy { font-size:13px; }
  @container (max-width:114px) {
    .home-epoque #home-epoque-lbl { white-space:normal; overflow:visible; text-overflow:clip; line-height:1; text-wrap:balance; }
  }
}
@media (max-height:700px) {
  /* écran court : les pastilles se resserrent, le coffre s'écarte encore du Portail ; la feuille Attaquer se tasse */
  .home-rail { left:calc(50% - 12px); }
  .attack-head { padding-top:15px; }
  .attack-choix-campagne { row-gap:5px; padding-block:1px 3px; }
  .attack-choix-campagne .attack-sceau { width:38px; height:38px; }
  .attack-choix-campagne .attack-copy strong { font-size:22px; }
  .attack-choix-campagne > b { min-height:54px; font-size:34px; }
  .attack-choix-campagne:has(.attack-garnison:not([hidden])) > b { min-height:62px; padding-bottom:25px; font-size:32px; }
  #cap26-attack-menu .attack-lecture > .attack-garnison { bottom:17px; font-size:14px; }
  .attack-menace { min-height:54px; }
  #attack-ennemi-art { width:62px; height:62px; margin:-6px -2px; }
  #attack-ennemi { font-size:22px; }
  .attack-lecture { gap:5px; }
  .attack-choix { min-height:44px; }
  .cap26-attack-menu { gap:6px; }
}

#stage:has(#cap26-attack-menu:not([hidden])) > :is(.coffre-status, .coffre-gain) { display:none; }

#stage:has(#cap26-attack-menu:not([hidden])) > .coffre-recu { display:none; }
/* Attaquer : une aventure or, puis des modes courts dans la famille électrique. */












.attaque-tag { font:800 11px/1.2 var(--f-texte); letter-spacing:.15em; text-transform:uppercase; color:#FFE194; }





































/* Finition CPU v04 : le viewport du dialogue finit avant le rail. Toute la liste
   reste dans le flux défilable, et le HUD de fond se retire en entier. */
#cap26-attack-menu {
  bottom:calc(var(--nav-h) + 8px);
  padding-bottom:8px;
  scroll-padding-block:12px;
}
.screen.home:has(> #cap26-attack-menu:not([hidden])) .home-head { visibility:hidden; }
#stage:has(#cap26-attack-menu:not([hidden])) > .coffre-recu { display:none; }
/* Le toast natif garde sa priorité. Sa présence réserve une rangée au-dessus du
   contenu plutôt que de recouvrir la tenue ou la fermeture du dialogue. */
#stage:has(#cap26-attack-menu:not([hidden])) > #toast:not(.combat-reglette) {
  top:calc(var(--safe-t) + 8px); bottom:auto;
}
#stage:has(> #toast.on:not(.combat-reglette)) #cap26-attack-menu {
  padding-top:calc(var(--safe-t) + 80px);
}
/* Composition mobile commune : le billet rend toute sa largeur au récit.
   Le b Jouer reste dans le bouton natif ; aucune action ni tabulation ajoutée. */













/* Compacité v07 : la garnison reste dans le flux du départ, à poids secondaire.
   Les textes longs augmentent la rangée ; aucune ligne coupée ni cible réduite. */
.screen.home .battle-row { bottom:calc(var(--nav-h) + 8px); }
.screen.home #home-battle { min-height:48px; padding:7px 10px 8px; gap:8px; }
.screen.home #home-battle > .picon { width:24px; }
.screen.home #home-battle-main { font-size:30px; line-height:1; }
.screen.home #home-battle:has(.battle-garnison:not([hidden])) {
  display:grid; grid-template-columns:minmax(0,1fr) 24px auto minmax(0,1fr);
  column-gap:8px; row-gap:4px;
}
.screen.home #home-battle:has(.battle-garnison:not([hidden])) > .picon { grid-column:2; grid-row:1; }
.screen.home #home-battle:has(.battle-garnison:not([hidden])) .battle-copy { grid-column:3; grid-row:1; padding-bottom:0; }




.screen.home::after { height:calc(var(--nav-h) + 94px); }
/* La Session est portée par son avertissement et la reprise, avec un état secondaire au pied. */
#stage:has(> #save-warning.autre-onglet:not([hidden])) .screen.home #home-battle,
.screen.home.lecture-suspendue #home-battle { opacity:1; --tranche:0 2px 0 #10284A,0 4px 6px rgba(0,8,24,.4); }
#stage:has(> #save-warning.autre-onglet:not([hidden])) .screen.home #home-battle-main,
.screen.home.lecture-suspendue #home-battle-main { font-size:22px; line-height:1.1; }
#stage:has(> #save-warning.autre-onglet:not([hidden])) .screen.home #home-battle > .picon,
.screen.home.lecture-suspendue #home-battle > .picon { width:20px; }
@media (max-height:700px) {
  .screen.home #home-battle-main { font-size:28px; }
  #stage:has(> #save-warning.autre-onglet:not([hidden])) .screen.home #home-battle-main,
  .screen.home.lecture-suspendue #home-battle-main { font-size:22px; }
}

/* Compacité v07 : titre et deux gains dans la face existante du reçu.
   Solde, récolte disponible, annonce accessible et trajet restent indépendants. */
#stage > span.coffre-recu { width:148px; height:72px; }
#stage > button.coffre-status[data-recu="true"] { margin-top:0; }
#stage > button.coffre-status[data-recu="true"] > span { padding:2px 4px; font-size:12px; }
#stage > button.coffre-status[data-recu="true"] ~ .coffre-gain {
  font-size:14px;
}
#stage > button.coffre-status[data-recu="true"] ~ .coffre-gain .picon { width:16px; height:16px; }

/* Compacité v07 : Campagne garde son sceau et son accent or. Le tag reste à
   côté du nom ; progression et Jouer partagent une rangée à toute hauteur. */
#cap26-attack-menu .attack-content { gap:5px; }
#cap26-attack-menu .attack-head { padding-top:10px; }
#cap26-attack-menu .attack-tenue { gap:6px; padding:2px 4px; }
#cap26-attack-menu .attack-tenue > .picon { width:18px; }
#cap26-attack-menu .attack-tenue > span:last-child { gap:1px; }
#cap26-attack-menu .attack-tenue strong { font-size:14px; line-height:1.15; }
#cap26-attack-menu .attack-tenue small { font-size:12px; line-height:1.25; }

















@media (max-height:700px) {
  #cap26-attack-menu .attack-content { gap:4px; }
  
}

/* Compacité v09 : seule la commande du dialogue reste visible pendant son ouverture.
   hidden pilote la restauration ; aucun état du profil ni inert n'est réécrit. */
.screen.home:has(> #cap26-attack-menu:not([hidden])) > .battle-row { visibility:hidden; }

/* Le reçu suit les dimensions naturelles de ses deux gains, mesurées une fois
   par contenu/largeur/police dans coffre-retour-ui. La cible du titre reste44. */
#stage > span.coffre-recu { width:128px; height:58px; }
#stage > span.coffre-recu::before {
  background:linear-gradient(135deg,#102B42,#091C31);
  box-shadow:inset 0 1px 0 #FFE09A,inset 0 0 0 1px #6097B6,0 2px 0 #715724;
}
#stage > button.coffre-status[data-recu="true"]:not([hidden]) {
  display:flex; align-items:flex-start; justify-content:center; min-height:44px; padding-top:4px;
}
#stage > button.coffre-status[data-recu="true"] > span { padding:0; font-size:12px; line-height:1.15; }
#stage > span.coffre-gain {
  width:max-content; min-width:48px; height:28px; font-size:14px; white-space:nowrap;
}
#stage > span.coffre-gain .picon { width:16px; height:16px; }

/* Format court : calmer les surfaces existantes, sans réduire la barre,
   les boutons44 ni la commande48, et sans retrancher de montant ou de texte. */
@media (max-height:700px) {
  .screen.home::before { height:calc(var(--safe-t) + 70px); }
  .screen.home::after { height:calc(var(--nav-h) + 76px); }
  .screen.home .home-res .bourse-pill {
    background:linear-gradient(160deg,rgba(11,39,76,.86),rgba(2,11,28,.82));
    box-shadow:inset 0 1px 0 #A9EDFF,inset 0 0 0 1px #368BD8;
  }
  .screen.home .home-res .bourse-pill > .picon { width:20px; }
  .screen.home .home-res .bourse-pill .val { font-size:18px; }
  .screen.home .profile-seal { box-shadow:inset 0 0 0 2px #38CAFF,0 2px 4px rgba(0,4,15,.45); }
  .screen.home .battle-row { bottom:calc(var(--nav-h) + 6px); }
  .screen.home #home-battle { min-height:48px; padding:6px 10px; }
  .screen.home #home-battle-main { font-size:26px; }
  .screen.home #home-battle:has(.battle-garnison:not([hidden])) { row-gap:3px; }
  #stage:has(> #save-warning.autre-onglet:not([hidden])) .screen.home #home-battle-main,
  .screen.home.lecture-suspendue #home-battle-main { font-size:20px; }
}

/* Cité v10 : le coffre prêt porte l'accent de récompense ; sa cible reste44.
   Le délai et les phases restent fournis par le retour pur. */
#stage > button.coffre-status[data-phase="disponible"] > span {
  padding:5px 12px; color:#FFE4A4;
}
#stage > button.coffre-status[data-phase="disponible"] > span::before {
  background:linear-gradient(145deg,#153F58,#071B35);
  box-shadow:inset 0 1px 0 #FFE09A,inset 0 0 0 1px #7FBFDA,0 2px 0 #715724;
}
/* Le reçu conserve ses montants entiers. La face et le trajet utilisent les
   dimensions naturelles ; seule la marge entre le titre et les gains diminue. */
#stage > span.coffre-recu { width:112px; height:48px; }
#stage > span.coffre-recu::before {
  box-shadow:inset 0 1px 0 #FFE09A,inset 0 0 0 1px #6097B6,0 1px 0 #715724;
}
#stage > button.coffre-status[data-recu="true"]:not([hidden]) { padding-top:2px; }
#stage > span.coffre-gain { min-width:44px; height:22px; }

/* Écran court : commande et renforts partagent la même surface. Le flex peut
   revenir à la ligne ; aucune hauteur maximale ni texte retranché. */
@media (max-height:700px) {
  .screen.home #home-battle {
    min-height:48px; padding:6px 8px; gap:8px;
  }
  .screen.home #home-battle-main { font-size:24px; line-height:1.05; }
  .screen.home #home-battle > .picon { flex:none; width:20px; }
  .screen.home #home-battle:has(.battle-garnison:not([hidden])) {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    column-gap:8px; row-gap:3px;
  }
  .screen.home #home-battle:has(.battle-garnison:not([hidden])) .battle-copy { flex:none; }
  
  
  /* Lecture seule est un statut : la reprise garde l'accent et l'action. */
  #stage:has(> #save-warning.autre-onglet:not([hidden])) .screen.home #home-battle,
  .screen.home.lecture-suspendue #home-battle { --tranche:none; }
  #stage:has(> #save-warning.autre-onglet:not([hidden])) .screen.home #home-battle::before,
  .screen.home.lecture-suspendue #home-battle::before {
    inset:5px 0; background:#0B213B; box-shadow:inset 0 0 0 1px #6097B6;
  }
  #stage:has(> #save-warning.autre-onglet:not([hidden])) .screen.home #home-battle-main,
  .screen.home.lecture-suspendue #home-battle-main { font-size:18px; line-height:1.1; text-shadow:none; }
  #stage:has(> #save-warning.autre-onglet:not([hidden])) .screen.home #home-battle > .picon,
  .screen.home.lecture-suspendue #home-battle > .picon { width:16px; }
}

/* Cité v11 : la face du butin suit ses valeurs, avec un biseau discret ;
   la cible44, l'annonce et les trajets appartiennent toujours au retour pur. */
#stage > span.coffre-recu { width:104px; height:42px; }
#stage > span.coffre-recu::before {
  border-radius:4px; transform:skewX(-4deg);
  background:linear-gradient(180deg,#214358 0,#143147 4px,#0A2034 100%);
  box-shadow:inset 0 1px 0 #D6C28D,inset 0 0 0 1px #688A9D,
    inset 0 -2px 0 #071729,0 2px 4px rgba(3,12,24,.28);
}
#stage > button.coffre-status[data-recu="true"] > span {
  color:#E3D6B4; font-weight:700; text-shadow:0 1px 0 #071729;
}
#stage > span.coffre-gain { height:20px; gap:3px; }
#stage > span.coffre-gain .picon { width:15px; height:15px; }

/* La garnison du départ est une légende entière, pas un second titre.
   Le menu et l'annonce accessible gardent l'explication complète. */
@media (max-height:700px) {
  .screen.home #home-battle:has(.battle-garnison:not([hidden])) {
    display:grid; grid-template-columns:minmax(0,1fr) 20px auto minmax(0,1fr);
    column-gap:6px; row-gap:2px; padding:5px 8px;
  }
  
  
}

/* Lecture seule ne ressemble plus à un départ disponible : la plaque du bas
   cède au statut, tandis que Reprendre ici reste la commande explicite. */
#stage:has(> #save-warning.autre-onglet:not([hidden])) .screen.home #home-battle,
.screen.home.lecture-suspendue #home-battle,
.screen.home.lecture-suspendue #home-battle:has(.battle-garnison:not([hidden])) {
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px;
  min-height:48px; padding:3px 8px; --tranche:none;
}
#stage:has(> #save-warning.autre-onglet:not([hidden])) .screen.home #home-battle::before,
.screen.home.lecture-suspendue #home-battle::before {
  background:none; box-shadow:none;
}
#stage:has(> #save-warning.autre-onglet:not([hidden])) .screen.home #home-battle::after,
.screen.home.lecture-suspendue #home-battle::after { display:none; }
#stage:has(> #save-warning.autre-onglet:not([hidden])) .screen.home #home-battle .battle-copy,
.screen.home.lecture-suspendue #home-battle .battle-copy {
  padding:4px 8px; border-radius:4px; background:rgba(6,25,47,.9);
}
#stage:has(> #save-warning.autre-onglet:not([hidden])) .screen.home #home-battle-main,
.screen.home.lecture-suspendue #home-battle-main { font-size:18px; line-height:1.1; }


/* Cité12 : même coffre et ancre. La commande nomme l’objet, le petit repère
   raccorde sa plaque au coffre sans nouvelle surface ni cible concurrente. */
#stage > button.coffre-status[data-phase="disponible"] > span {
  padding:4px 10px; font-size:13px; line-height:1.2;
}
#stage > button.coffre-status[data-phase="disponible"] > span::after {
  content:''; position:absolute; left:calc(50% - 4px); top:-5px;
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-bottom:5px solid #7FBFDA; pointer-events:none;
}
/* Le vrai viewport du menu défile déjà. Son rail contrasté rend la suite
   découvrable sans ajouter de panneau, masquer une destination ou écrire un état. */
#cap26-attack-menu { scrollbar-width:thin; scrollbar-color:#65CDFA #0C223A; }
#cap26-attack-menu::-webkit-scrollbar { width:6px; }
#cap26-attack-menu::-webkit-scrollbar-track { background:#0C223A; }
#cap26-attack-menu::-webkit-scrollbar-thumb { background:#65CDFA; border-radius:3px; }
/* Cité13 : un seul avis de Session dans le flux du pied, avec sa reprise44.
   Même nœud, textes et commande ; les épées de départ restent décoratives. */
.screen.home.lecture-suspendue > .battle-row:has(> #save-warning.autre-onglet) {
  display:grid; gap:0; padding:0 10px; z-index:27; isolation:isolate;
  border-radius:0; background:none; box-shadow:none;
}
/* Le fond suit la famille oblique ; textes et cibles restent droits et entiers. */
.screen.home.lecture-suspendue > .battle-row:has(> #save-warning.autre-onglet)::before {
  content:''; position:absolute; inset:0 4px; z-index:-1; pointer-events:none;
  border-radius:2px; transform:skewX(var(--biais));
  background:linear-gradient(180deg,#173D59,#0A223A);
  box-shadow:inset 0 1px 0 #A6D9ED,inset 0 0 0 1px #467B99,
    0 3px 0 #041527,0 5px 8px rgba(3,12,24,.24);
}
#stage .screen.home.lecture-suspendue .battle-row > #save-warning.autre-onglet.sur-accueil:not([hidden]) {
  position:relative; inset:auto; transform:none; width:100%; max-width:none;
  min-height:44px; padding:0; gap:8px; background:none; box-shadow:none;
}
#stage .screen.home.lecture-suspendue .battle-row > #save-warning::before { display:none; }
#stage .screen.home.lecture-suspendue .battle-row > #save-warning > span {
  flex:1; min-width:0; font:600 13px/1.25 var(--f-texte); text-wrap:balance;
}
#stage .screen.home.lecture-suspendue .battle-row > #save-warning > button {
  flex:none; min-width:44px; min-height:44px; width:88px;
}
#stage .screen.home.lecture-suspendue .battle-row > #home-battle {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  min-height:44px; padding:0 2px; gap:4px 12px; border-top:1px solid #31556D;
}
#stage .screen.home.lecture-suspendue .battle-row > #home-battle > .picon { display:none; }
#stage .screen.home.lecture-suspendue .battle-row > #home-battle .battle-copy,
#stage .screen.home.lecture-suspendue .battle-row > #home-battle .battle-garnison {
  position:static; flex:0 1 auto; min-width:0; padding:0; background:none;
  border-radius:0; color:#CBDDE9; white-space:normal; text-align:center;
}
#stage .screen.home.lecture-suspendue .battle-row #home-battle-main {
  font:600 13px/1.25 var(--f-texte); text-shadow:none;
}

/* Le feedback est dans le flux du choix : sa hauteur naturelle réserve sa place.
   Même message/temps ; rien n'est coupé, la liste défile avec lui si nécessaire. */
#cap26-attack-menu .attack-head > #toast:not(.combat-reglette) {
  position:relative; inset:auto; transform:none; align-self:center;
  width:max-content; max-width:100%; min-height:0; padding:6px 0 0;
  border-top:1px solid #31556D; border-radius:0; background:none; color:#C9DBE8;
  font:600 13px/1.25 var(--f-texte); text-shadow:none;
  box-shadow:none;
}
#cap26-attack-menu .attack-head > #toast:not(.on) { display:none; }
#cap26-attack-menu .attack-head > #toast:not(.combat-reglette)::before { display:none; }

/* Butin : biseau lumineux au coffre, flancs nuit et deux accents de monnaie.
   Face mesurée, gains entiers, ancre, cible44 et trajectoires restent souverains. */
#stage > span.coffre-recu::before {
  border-radius:1px; transform:skewX(var(--biais));
  background:linear-gradient(180deg,#28506A 0,#15394F 4px,#091F35 100%);
  box-shadow:inset 0 1px 0 #E0CC93,inset 0 0 0 1px #6E99AD,
    0 2px 0 #051326,0 3px 5px rgba(3,12,24,.2);
}
#stage > button.coffre-status[data-recu="true"] > span { color:#E7D7AA; }
#stage > span.coffre-gain.or { color:#FFE7AE; }
#stage > span.coffre-gain.gemmes { color:#C7E7F8; }

/* Cité v14 : l'entrée du menu réunit les annonces, sans nouveaux panneaux.
   Même titre accessible, mêmes textes complets et mêmes commandes44/48.
   La fermeture restaure les nœuds ; hors menu leurs règles restent celles du stage. */
#cap26-attack-menu .attack-head {
  display:flex; flex-direction:column; align-items:stretch; gap:3px;
  min-width:0; padding:6px 4px 4px;
}
#cap26-attack-menu .attack-head h2 {
  order:-2; min-height:22px; padding-right:44px; display:flex; align-items:center;
}
#cap26-attack-menu .attack-head > .attack-tenue {
  order:-1; padding:0; gap:6px; min-width:0;
}
#cap26-attack-menu .attack-head > .attack-tenue > .picon {
  width:16px; height:16px; align-self:flex-start; color:#A9BFD0;
}
#cap26-attack-menu .attack-head > .attack-tenue > span:last-child {
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline;
  gap:2px 4px; min-width:0;
}
#cap26-attack-menu .attack-head > .attack-tenue strong { color:#D8C18E; font-weight:700; }
#cap26-attack-menu .attack-head > .attack-tenue small { color:#AFC6D9; }
#cap26-attack-menu .attack-head > #toast:not(.combat-reglette) {
  align-self:stretch; width:auto; max-width:none; justify-content:flex-start; text-align:left;
  padding:0; border-top:0; color:#AFC6D9; font-size:12px;
  white-space:normal; text-wrap:wrap; overflow-wrap:anywhere;
}

/* Reprise v58 : une destination principale, son niveau réel puis Jouer.
   Les annonces et la lecture gardent leur flux ; le mode Garde reste inchangé. */







/* Garde : le bouton plein réserve sa vraie largeur ; la consigne revient à la ligne. */

/* Menus v59 : sceaux de destination, comptoir et registre. Les actions restent azur,
   les gains or ; seules les surfaces et les emblèmes portent leur famille. */










/* Le comptoir bronze réserve toujours l'or aux possessions et aux gains.
   Les lignes ne deviennent pas des cartes ; le stock et le reçu gardent leur place. */
.screen.panel[data-screen="shop"] {
  background:radial-gradient(110% 45% at 0 0,#49381F 0,#142C46 52%,#06152B 100%);
}
.screen.panel[data-screen="shop"] > .head { background:linear-gradient(100deg,rgba(202,149,50,.17),transparent 80%); }
.screen.panel[data-screen="shop"] .head-titles .panel-title { color:#FFE6A3; }
.screen.panel[data-screen="shop"] .menu-feuille::before {
  background:linear-gradient(160deg,#122B43,#07172D 65%);
  box-shadow:inset 0 2px 0 #D4AA58,0 -3px 12px rgba(181,125,36,.16);
}
.screen.panel[data-screen="shop"] .shop-h { color:#FFE09A; }
.screen.panel[data-screen="shop"] .shop-row + .shop-row { border-top-color:#675136; }
.screen.panel[data-screen="shop"] .shop-recu { color:#FFE3A0; }
.screen.panel[data-screen="shop"] .shop-payer { border-radius:0; border-color:#76DCFF; background:linear-gradient(180deg,#188FF0,#0666CE); }
.screen.panel[data-screen="shop"] .shop-payer:not(:disabled):active { background:var(--azur-appui); }

/* Les missions sont un registre cobalt : ordres, jauge et récompense restent les sujets. */
.screen.panel[data-screen="missions"] { background:radial-gradient(110% 45% at 100% 0,#254A80 0,#112C50 52%,#06152B 100%); }
.screen.panel[data-screen="missions"] > .head { background:linear-gradient(100deg,rgba(54,146,240,.17),transparent 80%); }
.screen.panel[data-screen="missions"] .menu-feuille::before {
  background:linear-gradient(160deg,#102D51,#07182F 65%);
  box-shadow:inset 0 2px 0 #58C8FF,0 -3px 12px rgba(30,138,233,.2);
}
.screen.panel[data-screen="missions"] .mission-emblem {
  border-radius:0; clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);
  background:linear-gradient(145deg,#21639C,#123756); color:#BCEFFF;
  box-shadow:inset 0 2px 0 #7BDEFF,inset 0 0 0 1px #399AD2;
}
.screen.panel[data-screen="missions"] .mission .bar { border-radius:0; height:8px; }
.screen.panel[data-screen="missions"] .mission .bar i { border-radius:0; }
.screen.panel[data-screen="missions"] .mission-featured .name { color:#D2F4FF; }
.screen.panel[data-screen="missions"] .mission + .mission { border-top-color:#345675; }

/* Une signature en filigrane déjà disponible, hors flux et sans texte supplémentaire. */
.screen.panel:is([data-screen="shop"],[data-screen="missions"]) .head-titles { position:relative; isolation:isolate; }
.screen.panel:is([data-screen="shop"],[data-screen="missions"]) .head-titles::before {
  content:''; position:absolute; inset:-5px 0 -5px auto; width:56px; z-index:-1; pointer-events:none;
  background:#94723B; opacity:.26; -webkit-mask:var(--ic-bourse) center / contain no-repeat; mask:var(--ic-bourse) center / contain no-repeat;
}
.screen.panel[data-screen="missions"] .head-titles::before {
  background:#6CBCEB; -webkit-mask-image:var(--ic-ordres); mask-image:var(--ic-ordres);
}

/* Boutique et Missions v59 : le titre et les soldes ont chacun leur rangée sur téléphone.
   Retour44, montants entiers et contrôles natifs gardent leurs dimensions. */
@media (max-width:420px) {
  .screen.panel:is([data-screen="shop"],[data-screen="missions"]) > .head {
    display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 12px;
  }
  .screen.panel:is([data-screen="shop"],[data-screen="missions"]) > .head > .round-btn { grid-column:1; grid-row:1; }
  .screen.panel:is([data-screen="shop"],[data-screen="missions"]) > .head > .head-titles { grid-column:2; grid-row:1; }
  .screen.panel:is([data-screen="shop"],[data-screen="missions"]) > .head > .purse {
    grid-column:1 / -1; grid-row:2; justify-self:end; max-width:100%; min-width:0;
    flex-wrap:wrap; justify-content:flex-end; gap:4px 12px;
  }
  .screen.panel:is([data-screen="shop"],[data-screen="missions"]) .purse > .purse-line { flex:none; }
}
/* Le choix Auto/Réserve reste le select natif du jeu, dans la matière du comptoir. */
.screen.panel[data-screen="shop"] .ravitaillement-ligne select {
  color-scheme:dark; color:#FFE3A0; background:#10253B; border-color:#BFA168;
}
.screen.panel[data-screen="shop"] .ravitaillement-ligne select:focus-visible {
  outline-color:#7FE3FF;
}

/* Boutique/Missions : une entrée directe dans la liste et des arêtes entières.
   Le défilement naturel remplace leurs fondus, sans toucher les autres écrans. */
.screen.panel:is([data-screen="shop"],[data-screen="missions"]) .menu-feuille {
  padding-top:10px;
}
.screen.panel:is([data-screen="shop"],[data-screen="missions"]) .scroll-area {
  padding:8px 12px 20px; -webkit-mask-image:none; mask-image:none;
  scrollbar-width:thin; scrollbar-color:#476881 transparent;
}
.screen.panel:is([data-screen="shop"],[data-screen="missions"]) .scroll-area::-webkit-scrollbar {
  display:block; width:4px;
}
.screen.panel:is([data-screen="shop"],[data-screen="missions"]) .scroll-area::-webkit-scrollbar-thumb {
  background:#476881;
}
.screen.panel[data-screen="shop"] .shop-payer:focus-visible,
.screen.panel[data-screen="missions"] .mission .claim:focus-visible {
  outline:2px solid #7FE3FF; outline-offset:3px;
}
@media (max-width:420px) {
  .screen.panel[data-screen="missions"] .mission {
    display:grid; grid-template-columns:40px minmax(0,1fr); gap:8px 10px;
    box-sizing:border-box; padding:12px 0;
  }
  .screen.panel[data-screen="missions"] .mission .mission-emblem {
    grid-column:1; grid-row:1; width:40px; height:40px; padding:10px;
    align-self:start;
  }
  .screen.panel[data-screen="missions"] .mission .col { grid-column:2; grid-row:1; }
  .screen.panel[data-screen="missions"] .mission .claim {
    grid-column:2; grid-row:2; justify-self:end; max-width:100%;
  }
  .screen.panel[data-screen="missions"] .mission .objective { flex-wrap:wrap; }
  .screen.panel[data-screen="missions"] .mission .objective .desc { flex:1 1 120px; }
  .screen.panel[data-screen="missions"] .mission .prog { white-space:nowrap; }
}
@media (max-width:399px) {
  .screen.panel[data-screen="shop"] .shop-paiements { flex-wrap:wrap; }
  .screen.panel[data-screen="shop"] .shop-payer { flex:1 1 88px; }
}