/* app/appuis.css — les appuis de commandement (app/appuis.js) : le choix sous les combinaisons,
   les petits boutons Appel en haut au milieu pendant la partie, le nouveau titre du bilan.
   Icônes au trait cyan, parties pleines en jaune (app/appuis-donnees.js). */

/* ---------- Le choix (écran « Choisissez la combinaison ») ---------- */
.appuis-section{margin:12px 0 2px;padding-top:12px;border-top:1px solid rgba(0,224,255,.14);text-align:left;}
.appuis-section h3{margin:0 0 9px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;
 font:900 13px system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7ff3ff;}
.appuis-section h3 small{font:600 11px system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#8f97ad;white-space:nowrap;}
.appuis-grille{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;}
@media (max-width:640px){.appuis-grille{grid-template-columns:repeat(3,1fr);}}
.appui-ico{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.appui-ico .plein{fill:#ffd23d;stroke:#ffd23d;stroke-width:1;}
.appui-carte{position:relative;min-width:0;min-height:84px;padding:8px 5px 7px;border-radius:12px;text-align:center;cursor:pointer;
 font:inherit;color:#7ff3ff;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);}
.appui-carte .appui-ico{width:32px;height:32px;display:block;margin:0 auto 3px;filter:drop-shadow(0 0 4px rgba(0,224,255,.6));}
.appui-carte b{display:block;font:700 11.5px/1.15 system-ui,sans-serif;color:#fff;}
.appui-carte i{display:block;margin-top:2px;font:600 10px/1.2 system-ui,sans-serif;font-style:normal;color:#8f97ad;}
.appui-carte:hover:not(:disabled){border-color:rgba(0,224,255,.4);}
.appui-carte.choisi{border:2px solid #00e0ff;padding:7px 4px 6px;background:linear-gradient(rgba(0,224,255,.12),rgba(0,224,255,.04));
 box-shadow:0 0 18px rgba(0,224,255,.35),inset 0 0 12px rgba(0,224,255,.15);}
.appui-carte.choisi i{color:#7ff3ff;}
.appui-carte.choisi::after{content:"✓";position:absolute;top:4px;right:6px;font:900 12px system-ui,sans-serif;color:#00e0ff;}
.appui-carte.verrou{cursor:default;opacity:.6;color:#6e7690;border-style:dashed;border-color:rgba(255,255,255,.14);
 background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 6px,transparent 6px 12px);}
.appui-carte.verrou .appui-ico{filter:none;}
.appui-carte.verrou .appui-ico .plein{fill:#6e7690;stroke:#6e7690;}
.appui-carte.verrou b{color:#aab1c4;}
.appuis-detail{display:flex;gap:10px;align-items:center;margin-top:9px;padding:8px 11px;border-radius:10px;font-size:12px;line-height:1.35;color:#c9cfe0;
 background:rgba(0,224,255,.07);border:1px solid rgba(0,224,255,.18);}
.appuis-detail .appui-ico{flex:none;width:22px;height:22px;color:#7ff3ff;}
.appuis-detail span{flex:1;min-width:0;}
.appuis-detail b{color:#fff;}
.appuis-detail em{flex:none;font:800 11px system-ui,sans-serif;font-style:normal;color:#7ff3ff;white-space:nowrap;}
.appuis-renforts{margin-top:7px;font-size:11px;color:#b57bff;}

/* ---------- En partie : les boutons Appel, en haut au milieu (sous le bandeau, au-dessus de la manette) ---------- */
.appels{position:fixed;left:50%;top:calc(var(--bandeau,58px) + 10px);transform:translateX(-50%);z-index:9150;display:none;gap:14px;pointer-events:none;}
.appels.vu{display:flex;}
.appel{position:relative;pointer-events:auto;touch-action:none;width:52px;height:52px;padding:0;border:0;border-radius:50%;cursor:pointer;
 display:flex;align-items:center;justify-content:center;color:#7f8aa6;background:rgba(5,8,18,.82);box-shadow:0 0 0 2px rgba(255,255,255,.16);
 -webkit-tap-highlight-color:transparent;}
.appel .appui-ico{width:26px;height:26px;opacity:.4;}
.appel .appui-ico .plein{fill:#7f8aa6;stroke:#7f8aa6;}
/* L'anneau de recharge : il se remplit (--p) autour du bouton. */
.appel-anneau{position:absolute;inset:-4px;border-radius:50%;pointer-events:none;
 background:conic-gradient(#00e0ff 0 var(--p,0%),rgba(255,255,255,.08) var(--p,0%) 100%);
 -webkit-mask:radial-gradient(circle,transparent 27px,#000 28px);mask:radial-gradient(circle,transparent 27px,#000 28px);}
.appel-compte{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 17px system-ui,sans-serif;color:#fff;
 text-shadow:0 0 6px rgba(0,224,255,.8);font-variant-numeric:tabular-nums;pointer-events:none;}
.appel kbd{position:absolute;right:-3px;bottom:-3px;min-width:15px;height:15px;border-radius:4px;font:800 9px/15px system-ui,sans-serif;color:#03141a;background:#7ff3ff;
 pointer-events:none;opacity:.85;}
html.tactile .appel kbd{display:none;}
/* Prêt : le néon cyan de la maquette, qui respire. */
.appel.pret{color:#fff;background:radial-gradient(circle at 50% 40%,rgba(0,224,255,.3),rgba(5,10,24,.88) 70%);
 box-shadow:0 0 0 2px rgba(127,243,255,.9),0 0 18px rgba(0,224,255,.65),inset 0 0 12px rgba(0,224,255,.35);animation:appel-pret 1.6s ease-in-out infinite;}
.appel.pret .appui-ico{opacity:1;filter:drop-shadow(0 0 4px rgba(0,224,255,.9));}
.appel.pret .appui-ico .plein{fill:#ffd23d;stroke:#ffd23d;}
.appel.pret .appel-anneau{display:none;}
@keyframes appel-pret{50%{box-shadow:0 0 0 2px rgba(127,243,255,.9),0 0 28px rgba(0,224,255,.9),inset 0 0 14px rgba(0,224,255,.45);}}
.appel.pret:active{transform:scale(.92);}
/* L'ogive tirée : le bouton s'éteint pour la partie. */
.appel.fini{opacity:.35;}
.appel.fini .appel-anneau{display:none;}
@media (prefers-reduced-motion:reduce){.appel.pret{animation:none;}}

/* ---------- Le nouveau titre, en tête du bilan (couleur du titre : --gc) ---------- */
.nouveau-titre{position:relative;margin:0 0 12px;padding:14px 14px 12px;border-radius:14px;text-align:center;color:var(--gc);
 background:radial-gradient(260px 140px at 50% 0,color-mix(in srgb,var(--gc) 22%,transparent),transparent 70%),rgba(10,9,22,.9);
 border:1px solid color-mix(in srgb,var(--gc) 55%,transparent);box-shadow:0 0 26px color-mix(in srgb,var(--gc) 25%,transparent);
 animation:bilan-in .4s both;}
.nt-kick{font:800 11px system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#ffd23d;}
.nt-galon{display:block;width:64px;height:64px;margin:6px auto 2px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gc) 70%,transparent));animation:nt-galon .7s .2s both;}
@keyframes nt-galon{from{transform:scale(.4) rotate(-12deg);opacity:0;}70%{transform:scale(1.12);}}
.nt-nom{font:900 21px/1.1 'Arial Black',system-ui,sans-serif;text-transform:uppercase;color:#fff;text-shadow:0 0 12px var(--gc);}
.nt-debloque{display:flex;gap:11px;align-items:center;margin:10px auto 0;max-width:420px;padding:9px 11px;border-radius:11px;text-align:left;font-size:12px;line-height:1.35;color:#c9cfe0;
 background:rgba(0,224,255,.07);border:1px solid rgba(0,224,255,.25);}
.nt-debloque .appui-ico{flex:none;width:36px;height:36px;color:#7ff3ff;filter:drop-shadow(0 0 4px rgba(0,224,255,.6));}
.nt-debloque small{display:block;font:800 10px system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7ff3ff;}
.nt-debloque b{display:block;font-size:14px;color:#fff;}
.nt-prochain{margin-top:8px;font-size:11px;color:#8f97ad;}
.nt-prochain b{color:#c9cfe0;}