/* ============================================================================
   MEETennis — assets/badges.css
   La page « Mes badges ». S'appuie sur les variables de app.css.

   Parti pris : les badges à débloquer sont AUSSI visibles que ceux obtenus.
   Une grille où l'on ne verrait que ses propres insignes n'apprend rien ;
   ici on voit la collection entière, avec ce qui manque et à quelle
   distance on en est. C'est ça qui donne envie de revenir.
   ============================================================================ */

/* ---- Bandeau de niveau ---------------------------------------------------- */
.gm-head{background:var(--surface);border-radius:24px;padding:20px;box-shadow:var(--shadow-card);
  margin:-18px -2px 0;position:relative;z-index:3}
.gm-lv{display:flex;align-items:center;gap:14px}
.gm-lv .ring{width:64px;height:64px;flex:none;position:relative;display:grid;place-items:center}
.gm-lv .ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.gm-lv .ring b{font:900 20px/1 Montserrat,sans-serif;color:var(--brand)}
.gm-lv .txt{flex:1;min-width:0}
.gm-lv .txt h2{font:900 21px/1.15 Montserrat,sans-serif;margin:0 0 3px;color:var(--ink);letter-spacing:-.4px}
.gm-lv .txt p{font-size:13px;color:var(--ink-soft);margin:0;font-weight:600;line-height:1.45}

.gm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(0,0,0,.06)}
.gm-stats div{text-align:center}
.gm-stats b{display:block;font:900 18px/1 Montserrat,sans-serif;color:var(--ink)}
.gm-stats span{font-size:10.5px;color:var(--ink-soft);font-weight:600;display:block;margin-top:4px;line-height:1.25}

/* ---- Progression globale -------------------------------------------------- */
.gm-count{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:26px 0 12px}
.gm-count h2{font:900 22px/1 Montserrat,sans-serif;letter-spacing:-.4px;margin:0;color:var(--ink)}
.gm-count span{font:800 13px/1 Montserrat,sans-serif;color:var(--brand)}

/* ---- Grille des insignes -------------------------------------------------- */
.gm-fam{font:800 12px/1 Montserrat,sans-serif;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-soft);margin:24px 0 11px}
.gm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px}
.gm-card{background:var(--surface);border-radius:18px;padding:16px 13px 15px;text-align:center;
  box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.gm-card.off{background:rgba(128,128,128,.06);box-shadow:none}
.gm-card .bsvg{margin:0 auto 10px;display:block}
.gm-card h3{font:800 14px/1.25 Montserrat,sans-serif;margin:0 0 5px;color:var(--ink)}
.gm-card.off h3{color:var(--ink-soft)}
.gm-card p{font-size:11.5px;line-height:1.45;color:var(--ink-soft);margin:0;font-weight:500}

/* La barre de progression ne s'affiche que si le badge est mesurable :
   « 0/1 » sur un badge réservé aux modérateurs serait absurde. */
.gm-prog{margin-top:10px}
.gm-prog .bar{height:5px;border-radius:99px;background:rgba(128,128,128,.2);overflow:hidden}
.gm-prog .bar i{display:block;height:100%;border-radius:99px;background:var(--brand);transition:width .5s}
.gm-prog span{display:block;margin-top:5px;font:800 10.5px/1 Montserrat,sans-serif;color:var(--ink-soft)}

.gm-card .won{display:inline-block;margin-top:9px;font:800 10px/1 Montserrat,sans-serif;letter-spacing:.4px;
  text-transform:uppercase;color:#2e7d32;background:rgba(46,125,50,.12);padding:4px 9px;border-radius:999px}

/* ---- Les derniers obtenus, en avant ---------------------------------------- */
.gm-recent{display:flex;gap:10px;overflow-x:auto;padding:2px 18px 6px;margin:0 -18px;scrollbar-width:none}
.gm-recent::-webkit-scrollbar{display:none}
.gm-recent .gm-card{flex:none;width:150px}

@media (min-width:900px){
  .gm-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
}