/* app/partie/appuis.css — les appuis de commandement (app/partie/appuis.js) : le choix sous les persos,
   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/partie/appuis-donnees.js). */

/* ---------- Le choix (écran « Choisis ton perso », sous les persos) ---------- */
.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 11px/1.2 system-ui,sans-serif;font-style:normal;color:#8f97ad;}
@media (hover:hover){:where(html:not(.doigt)) .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;}
/* Téléphone couché : la section se serre (cartes en ligne, icône et nom côte à côte) pour que tout
   l'écran des persos tienne sans défiler. */
@media (orientation:landscape){
 html.petit-ecran .appuis-section{margin:6px 0 0;padding-top:6px;}
 html.petit-ecran .appuis-section h3{margin-bottom:5px;font-size:11px;}
 html.petit-ecran .appuis-grille{gap:5px;}
 html.petit-ecran .appui-carte{min-height:0;padding:4px 5px;display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;column-gap:4px;text-align:left;}
 html.petit-ecran .appui-carte.choisi{padding:3px 5px;}
 html.petit-ecran .appui-carte .appui-ico{grid-row:span 2;width:20px;height:20px;margin:0;}
 html.petit-ecran .appui-carte b{font-size:11px;white-space:nowrap;}
 html.petit-ecran .appui-carte i{margin:0;font-size:11px;white-space:nowrap;}
 html.petit-ecran .appui-carte .appui-rang{display:none;} /* couché, la couleur suffit à dire le rang */
 html.petit-ecran .appuis-detail{margin-top:5px;padding:5px 9px;font-size:11px;}
}

/* ---------- 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:12px;pointer-events:none;}
.appels.vu{display:flex;}
/* Un bouton n'apparaît que lorsque son appui est disponible : en recharge (ou l'ogive tirée), il est caché. */
.appel{position:relative;pointer-events:auto;touch-action:none;width:42px;height:42px;padding:0;border:0;border-radius:50%;cursor:pointer;
 display:none;align-items:center;justify-content:center;color:#fff;-webkit-tap-highlight-color:transparent;
 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 14px rgba(0,224,255,.65),inset 0 0 10px rgba(0,224,255,.35);}
.appel .appui-ico{width:22px;height:22px;filter:drop-shadow(0 0 4px rgba(0,224,255,.9));}
.appel .appui-ico .plein{fill:#ffd23d;stroke:#ffd23d;}
.appel kbd{position:absolute;right:-3px;bottom:-3px;min-width:14px;height:14px;border-radius:4px;font:800 11px/14px system-ui,sans-serif;color:#03141a;background:#7ff3ff;
 pointer-events:none;opacity:.85;}
html.tactile .appel kbd{display:none;}
/* Prêt : il apparaît en fondu rapide, puis le néon cyan respire. Les deux ne jouent que sur
   l'opacité (le halo est un calque à part) : le navigateur les anime sans repeindre, rien ne rame. */
.appel.pret{display:flex;animation:appel-fondu .2s ease-out;}
.appel::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
 box-shadow:0 0 22px rgba(0,224,255,.9),inset 0 0 12px rgba(0,224,255,.45);animation:appel-pret 1.6s ease-in-out infinite;}
@keyframes appel-fondu{from{opacity:0;}}
@keyframes appel-pret{50%{opacity:1;}}
.appel.pret:active{transform:scale(.92);}
@media (prefers-reduced-motion:reduce){.appel.pret,.appel::after{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 11px 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;}
/* Téléphone debout : les mêmes cartes, un peu plus petites, pour que les persos tiennent au-dessus. */
@media (orientation:portrait){
 html.petit-ecran .appuis-section{margin:8px 0 0;padding-top:8px;}
 html.petit-ecran .appuis-section h3{margin-bottom:6px;font-size:12px;}
 html.petit-ecran .appuis-grille{gap:5px;}
 html.petit-ecran .appui-carte{min-height:66px;padding:5px 4px 5px;}
 html.petit-ecran .appui-carte.choisi{padding:4px 3px 4px;}
 html.petit-ecran .appui-carte .appui-ico{width:24px;height:24px;margin-bottom:2px;}
 html.petit-ecran .appui-carte b{font-size:11px;}
 html.petit-ecran .appui-carte i{font-size:11px;}
 html.petit-ecran .appuis-detail{margin-top:6px;padding:5px 9px;font-size:11px;}
}