/* app/progression.css — la progression (app/progression.js) : le compteur d'Ærg, les ordres du jour
   sur l'accueil, le bilan sur l'écran de fin, le compteur du bandeau en partie. */

.aerg-ico{display:inline-block;width:.8em;height:1em;vertical-align:-.12em;margin:0 .15em 0 0;}
.aerg-compteur{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:14px;font-weight:900;color:#fff;
 background:rgba(0,224,255,.08);border:1px solid rgba(0,224,255,.35);font-variant-numeric:tabular-nums;}
.aerg-compteur .aerg-ico{width:12px;height:15px;margin:0;}

/* Le bandeau en partie : l'Ærg gagné, à côté des points. */
.arena-hud-prog{color:#7ff3ff;text-shadow:0 0 8px rgba(0,224,255,.4);font-variant-numeric:tabular-nums;}
.arena-hud-prog::before{content:"";display:inline-block;width:9px;height:11px;margin:0 3px 0 6px;vertical-align:-1px;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 126'%3E%3Cpath d='M50 10 L90 32 L90 94 L50 116 L10 94 L10 32 Z' fill='%2300e0ff'/%3E%3Cpath d='M54 30 L34 68 L48 68 L42 100 L66 54 L50 54 Z' fill='%2307060f'/%3E%3C/svg%3E") center/contain no-repeat;}
.arena-hud-prog[hidden]{display:none;}

/* L'accueil : le compteur et les trois ordres du jour. */
.ordres{width:100%;display:flex;flex-direction:column;gap:5px;}
.ordres-titre{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8e96ad;font-weight:700;}
.ordres-ration{color:#7dff6a;letter-spacing:.02em;text-transform:none;font-weight:800;margin-left:6px;}
/* Alignés sur la ligne du texte : la flèche et la prime ne descendent pas vers la jauge. */
.ordre{display:flex;align-items:baseline;gap:9px;padding:7px 10px;border-radius:10px;background:rgba(16,14,32,.92);border:1px solid rgba(255,255,255,.1);font-size:12px;color:#fff;}
.ordre.fait{border-color:rgba(125,255,106,.3);background:linear-gradient(rgba(125,255,106,.06),rgba(125,255,106,.06)),rgba(16,14,32,.92);}
.ordre.fait .ordre-txt{color:#8e96ad;text-decoration:line-through;}
.ordre-coche{font-weight:900;color:#ffd63d;width:10px;text-align:center;}
.ordre.fait .ordre-coche{color:#7dff6a;}
.ordre-txt{flex:1;min-width:0;}
.ordre-barre{display:block;height:4px;margin-top:4px;border-radius:2px;background:#15132a;overflow:hidden;}
.ordre-barre b{display:block;height:100%;background:linear-gradient(90deg,#00e0ff,#9a5cff);box-shadow:0 0 6px rgba(0,224,255,.5);}
.ordre-prime{font-size:11px;font-weight:800;color:#7ff3ff;white-space:nowrap;font-variant-numeric:tabular-nums;}
.ordre.fait .ordre-prime{color:#7dff6a;}
.ordre-prime .aerg-ico{margin:0 0 0 .15em;}

/* L'écran de fin : le bilan de la partie. */
.bilan{margin:10px 0 0;padding:10px 12px;border-radius:14px;border:1px solid rgba(0,224,255,.3);background:rgba(0,224,255,.05);display:flex;flex-direction:column;gap:4px;text-align:left;}
.bilan-tete{display:flex;align-items:center;gap:8px;margin-bottom:3px;}
.bilan-tete .aerg-ico{width:22px;height:27px;margin:0;}
.bilan-tete b{font-size:24px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;line-height:1;}
.bilan-tete span{font-size:11px;color:#8e96ad;}
.bilan-ligne{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#c9cfe0;}
.bilan-ligne b{color:#7ff3ff;font-variant-numeric:tabular-nums;}
.bilan-ligne.ordre-reussi{padding:5px 8px;border-radius:8px;background:rgba(125,255,106,.08);border:1px solid rgba(125,255,106,.3);color:#7dff6a;font-weight:800;}
.bilan-ligne.ordre-reussi b{color:#7dff6a;}
.bilan-total{margin-top:4px;font-size:11px;color:#8e96ad;font-variant-numeric:tabular-nums;}

/* Au doigt, l'accueil est bas et serré : les ordres restent compacts. */
html.tactile .ordre{padding:6px 9px;font-size:11.5px;}
html.tactile .aerg-compteur{font-size:13px;padding:4px 10px;}

/* Un bouton qu'on ne peut pas encore toucher (pas assez d'Ærg, synchro trop basse, se gagne
   ailleurs) : éteint, en pointillés, sans lueur ni réaction au survol ; la raison est écrite dessous. */
.arena-root .arena-btn[disabled],.arena-root .arena-btn[disabled]:hover,.arena-root .arena-btn[disabled]:focus-visible,
.arena-root .arena-btn.primary[disabled],.arena-root .arena-btn.primary[disabled]:hover,.arena-root .arena-btn.primary[disabled]:focus-visible{
 cursor:not-allowed;color:#7d849a;background:rgba(255,255,255,.025);border:1px dashed rgba(255,255,255,.18);box-shadow:none;text-shadow:none;transform:none;filter:none;opacity:1;}
.arena-root .arena-btn[disabled] .aerg-ico{filter:grayscale(1) brightness(.7);}
/* Un bouton avec sa raison écrite dessous : deux lignes. */
.arena-root .arena-btn:has(> small){height:auto;min-height:40px;padding-top:5px;padding-bottom:5px;line-height:1.2;}

/* L'écran des héros (moteur, HOST.heros) : les caissons grisés, le pastille d'évolution, le solde. */
.arena-heros-titre{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.arena-heros-solde{flex:none;letter-spacing:0;}
.arena-hero{position:relative;}
.arena-hero.cryo canvas{filter:grayscale(1) brightness(.55) contrast(.9);opacity:.85;}
.arena-hero.cryo{background:rgba(0,224,255,.03);border-style:dashed;border-color:rgba(0,224,255,.22);}
.arena-hero.cryo b{color:#8e96ad;}
.arena-hero.cryo small{color:#5fc9d6;}
.arena-hero.cryo:hover,.arena-hero.cryo:focus-visible{border-color:rgba(0,224,255,.6);}
.arena-hero-etat{position:absolute;top:6px;right:6px;min-width:16px;padding:1px 5px;border-radius:999px;font:900 10px/14px system-ui,sans-serif;font-style:normal;
 color:#07060f;background:#ffd63d;text-align:center;font-variant-numeric:tabular-nums;}
.arena-hero-etat.cryo,.arena-hero-etat.verrou{color:#7ff3ff;background:rgba(0,224,255,.12);border:1px solid rgba(0,224,255,.4);}
.arena-hero-etat.verrou{padding:1px 4px;}
.arena-hero-etat.cryo::before{content:"";display:inline-block;width:7px;height:9px;margin:0 3px 0 0;vertical-align:-1px;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 126'%3E%3Cpath d='M50 10 L90 32 L90 94 L50 116 L10 94 L10 32 Z' fill='%2300e0ff'/%3E%3Cpath d='M54 30 L34 68 L48 68 L42 100 L66 54 L50 54 Z' fill='%2307060f'/%3E%3C/svg%3E") center/contain no-repeat;}

/* La fiche d'un héros (progression.ficheHtml) : le dessin, le trait, la synchro, les dix évolutions. */
.arena-panel.fiche-ecran{width:min(720px,100%);}
.fiche{display:flex;flex-direction:column;gap:10px;}
.fiche-tete{display:flex;gap:16px;align-items:center;}
.fiche-cadre{position:relative;flex:none;width:220px;height:160px;border-radius:14px;overflow:hidden;
 background:radial-gradient(ellipse at 50% 60%,rgba(255,181,46,.18),rgba(255,255,255,.03) 70%);border:1px solid rgba(255,255,255,.12);}
.fiche.cryo .fiche-cadre{background:radial-gradient(ellipse at 50% 60%,rgba(0,224,255,.16),rgba(0,224,255,.02) 70%);border-color:rgba(0,224,255,.3);border-style:dashed;}
.fiche.cryo .fiche-cadre canvas{filter:grayscale(1) brightness(.6);}
.fiche-cadre canvas{display:block;width:100%;height:100%;}
.fiche-led{position:absolute;left:10px;top:10px;width:8px;height:8px;border-radius:50%;background:#00e0ff;box-shadow:0 0 8px #00e0ff;animation:fiche-led 1.6s infinite;}
@keyframes fiche-led{50%{opacity:.25;}}
.fiche-cryo{position:absolute;left:24px;top:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7ff3ff;font-weight:700;}
.fiche-id{flex:1;min-width:0;}
.fiche-id .arena-title{margin:0 0 2px;font-size:26px;}
.fiche-ancien{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8e96ad;font-weight:700;}
.fiche-trait{margin-top:8px;font-size:13px;color:#fff;line-height:1.4;}
.fiche-trait b{color:#ffd63d;}
.fiche-tip{margin-top:4px;font-size:12px;color:#8891a3;}
.fiche-synchro{display:flex;align-items:center;gap:10px;font-size:12px;color:#c9cfe0;white-space:nowrap;}
.fiche-synchro i{flex:1;display:block;height:6px;border-radius:3px;background:#15132a;overflow:hidden;}
.fiche-synchro b{display:block;height:100%;background:linear-gradient(90deg,#00e0ff,#9a5cff);box-shadow:0 0 6px rgba(0,224,255,.5);}
.fiche-note{font-size:11px;color:#8e96ad;line-height:1.4;}
.fiche-evos{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.fiche-evo{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:9px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);font-size:11.5px;color:#c9cfe0;}
.fiche-evo.faite{border-color:rgba(125,255,106,.3);background:rgba(125,255,106,.06);}
.fiche-evo.faite .fiche-n{color:#7dff6a;}
.fiche-evo.prochaine{border-color:rgba(255,214,61,.45);background:rgba(255,214,61,.07);color:#fff;}
.fiche-evo.prochaine .fiche-n{color:#ffd63d;}
.fiche-evo.verrou{opacity:.6;}
.fiche-n{flex:none;width:18px;text-align:center;font-weight:900;color:#8e96ad;}
.fiche-txt{flex:1;min-width:0;line-height:1.3;}
.fiche-txt small{display:block;font-size:10px;color:#8e96ad;}
.fiche-prix{flex:none;font-weight:800;color:#7ff3ff;font-variant-numeric:tabular-nums;white-space:nowrap;}
.fiche-prix .aerg-ico,.fiche .arena-btn .aerg-ico{margin:0 0 0 .25em;}
.fiche-evo.faite .fiche-prix{color:#7dff6a;font-weight:600;}
.fiche .arena-actions{margin-top:6px;}
/* Téléphone debout : trois boutons côte à côte s'écrasaient sur trois lignes ; l'évolution
   (ou le réveil) prend toute la largeur au-dessus, les deux autres se partagent la rangée. */
@media (orientation:portrait){
 .fiche .arena-actions:has(> :nth-child(3)){flex-wrap:wrap;}
 .fiche .arena-actions:has(> :nth-child(3)) > [data-act="evoluer"]{order:-1;flex:1 1 100%;}
}
.fiche .arena-btn small{display:block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:none;opacity:.9;}
.fiche-reserve{text-align:center;font-size:11px;color:#8e96ad;font-variant-numeric:tabular-nums;}

/* Sur un téléphone : fiche serrée, dessin plus petit, évolutions sur une colonne. */
html.petit-ecran .arena-heros-solde .aerg-compteur{font-size:12px;padding:3px 9px;}
html.petit-ecran .arena-hero-etat{top:3px;right:3px;font-size:9px;line-height:12px;padding:1px 4px;}
html.petit-ecran .fiche-tete{gap:10px;}
html.petit-ecran .fiche-cadre{width:132px;height:110px;}
html.petit-ecran .fiche-id .arena-title{font-size:20px;}
html.petit-ecran .fiche-trait{font-size:12px;margin-top:4px;}
html.petit-ecran .fiche-tip{display:none;}
html.petit-ecran .fiche-evos{gap:4px;}
html.petit-ecran .fiche-evo{padding:4px 8px;font-size:11px;}
@media (max-width:600px){.fiche-evos{grid-template-columns:1fr;}}