/* ============================================================
   MON PROFIL v2 — refonte sur composants proto.css (.statcard/.levelbar/.badge)
   scopé #sec-profil (classes .pf2-* anti-collision)
   ============================================================ */
/* --- Carte identité --- */
.pf-scope .pf2-id { display:flex; align-items:center; gap:16px; border:4px solid var(--ink); background:var(--paper); padding:16px; box-shadow:6px 6px 0 var(--ink); }
.pf-scope .pf2-ava { position:relative; flex-shrink:0; }
.pf-scope .pf2-avabox { width:84px; height:84px; border:4px solid var(--ink); background:var(--paper); overflow:hidden; box-shadow:4px 4px 0 var(--ink); }
.pf-scope .pf2-avabox > *, .pf-scope .pf2-avabox img { width:100% !important; height:100% !important; display:block; border:none !important; box-shadow:none !important; }
.pf-scope .pf2-lv { position:absolute; bottom:-8px; right:-8px; background:var(--magenta,#FF2E93); color:#fff; border:3px solid var(--ink); font-family:var(--fd); font-size:12px; line-height:1; padding:3px 6px; box-shadow:2px 2px 0 var(--ink); }
.pf-scope .pf2-idmeta { flex:1; min-width:0; }
.pf-scope .pf2-lbl { font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:2px; color:rgba(10,10,10,0.55); }
.pf-scope .pf2-name { font-family:var(--fd); font-size:30px; line-height:30px; margin:4px 0 9px; word-break:break-word; }
.pf-scope .pf2-tags { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pf-scope .pfx-flag { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border:2.5px solid var(--ink); background:#FFD600; box-shadow:3px 3px 0 var(--ink); }
.pf-scope .pfx-flag img { width:18px; height:13px; border:1px solid var(--ink); }
.pf-scope .pfx-flag span { font-family:var(--fd); font-size:12px; letter-spacing:1px; }
.pf-scope .pfx-flag .fl-globe { font-size:13px; line-height:1; }

/* --- Bloc rang + barre XP (composant levelbar) --- */
.pf-scope .pf2-rank { --pf-accent:#FFD600; margin-top:14px; border:4px solid var(--ink); background:var(--paper); padding:14px; box-shadow:6px 6px 0 var(--ink); }
.pf-scope .pf2-rank-hd { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.pf-scope .pf2-rank-ic { width:48px; height:48px; flex-shrink:0; border:3px solid var(--ink); background:var(--pf-accent); box-shadow:3px 3px 0 var(--ink); display:flex; align-items:center; justify-content:center; transform:rotate(-4deg); }
.pf-scope .pf2-rank-ic img { width:32px; height:32px; }
.pf-scope .pf2-rank-k { font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:1.5px; color:rgba(10,10,10,0.6); }
.pf-scope .pf2-rank-nm { font-family:var(--fd); font-size:24px; line-height:24px; letter-spacing:.5px; }
.pf-scope .pf2-rank .levelbar { display:flex; align-items:center; gap:10px; }
.pf-scope .pf2-rank .level-badge { width:44px; height:44px; flex-shrink:0; border:3px solid var(--ink); background:var(--ink); color:var(--paper); box-shadow:3px 3px 0 var(--pf-accent); font-family:var(--fd); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.pf-scope .pf2-rank .level-badge .n { font-size:18px; } .pf-scope .pf2-rank .level-badge .l { font-size:7px; letter-spacing:1px; margin-top:1px; }
.pf-scope .pf2-rank .xpbar { flex:1; height:24px; border:3px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); position:relative; overflow:hidden; }
.pf-scope .pf2-rank .xpbar .fill { height:100%; background:var(--pf-accent); border-right:3px solid var(--ink); transition:width .5s ease; }
.pf-scope .pf2-rank .xpbar .txt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:11px; letter-spacing:1px; color:var(--ink); mix-blend-mode:hard-light; }
.pf-scope .pf2-next { margin-top:9px; font-family:var(--fb); font-weight:700; font-size:11px; letter-spacing:.3px; color:rgba(10,10,10,0.7); text-align:center; }
.pf-scope .pf2-next b { color:var(--ink); }

/* --- Stats (6 statcards) --- */
.pf-scope .pf2-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.pf-scope .pf2-stats .statcard { border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); text-align:center; padding:13px 6px; }
.pf-scope .pf2-stats .statcard .v { font-family:var(--fd); font-size:26px; line-height:1; }
.pf-scope .pf2-stats .statcard .l { font-family:var(--fb); font-weight:700; font-size:9px; letter-spacing:.5px; margin-top:5px; }
.pf-scope .pf2-stats .s1 { background:#FFD600; }
.pf-scope .pf2-stats .s2 { background:#5BE885; }
.pf-scope .pf2-stats .s3 { background:#FF5252; color:var(--paper); }
.pf-scope .pf2-stats .s4 { background:#5BD8E5; }
.pf-scope .pf2-stats .s5 { background:#9D4EDD; color:var(--paper); }
.pf-scope .pf2-stats .s6 { background:#FF2E93; color:var(--paper); }

/* --- Notes (série / meilleure perf) --- */
.pf-scope .pf2-note { margin-top:14px; display:flex; align-items:center; gap:14px; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:12px 14px; }
.pf-scope .pf2-note.streak { background:#FFF1C2; }
.pf-scope .pf2-note.best { background:#E8F5C8; }
.pf-scope .pf2-note-ic { font-size:34px; flex-shrink:0; }
.pf-scope .pf2-note.streak .pf2-note-ic { animation:stk-bounce .6s linear infinite alternate; }
@keyframes stk-bounce { 0%{transform:translateY(0) scale(1)} 100%{transform:translateY(-3px) scale(1.05)} }
.pf-scope .pf2-note .k { font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:1px; color:rgba(10,10,10,0.55); }
.pf-scope .pf2-note .v { font-family:var(--fd); font-size:24px; line-height:1.1; margin:2px 0; }
.pf-scope .pf2-note .c { font-family:var(--fb); font-weight:700; font-size:10px; opacity:.7; }

/* --- Sections (modes / badges) --- */
.pf-scope .pf2-sec { margin-top:24px; }
/* Titre de section BRUTALIST (sticker bordé + ombre dure), pas un simple souligné */
.pf-scope .pf2-h { display:inline-block; font-family:var(--fd); font-size:15px; letter-spacing:1px; padding:6px 12px; border:3px solid var(--ink); background:#FFD600; box-shadow:3px 3px 0 var(--ink); margin-bottom:15px; transform:rotate(-1deg); }
.pf-scope .pf2-h .pf2-count { font-size:12px; opacity:.7; margin-left:4px; }
.pf-scope .mgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* carte de mode : reprend le langage des cartes de FORMAT (fond coloré + icône du mode) */
.pf-scope .m-card { display:flex; align-items:center; gap:10px; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:10px; background:var(--paper); }
.pf-scope .m-card .m-ic { width:42px; height:42px; flex-shrink:0; border:3px solid var(--ink); background:var(--paper); box-shadow:2px 2px 0 var(--ink); display:flex; align-items:center; justify-content:center; }
.pf-scope .m-card .m-ic img, .pf-scope .m-card .m-ic .noto { width:27px; height:27px; }
.pf-scope .m-card .m-tx { min-width:0; }
.pf-scope .m-card .m-nm { font-family:var(--fd); font-size:14px; letter-spacing:.5px; line-height:1; }
.pf-scope .m-card .m-st { font-family:var(--fd); font-size:15px; margin-top:5px; letter-spacing:.5px; }

/* --- Grille de badges (composant .badge canonique) --- */
.pf-scope .badge-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.pf-scope .badge-grid .badge { display:flex; flex-direction:column; align-items:center; gap:6px; }
.pf-scope .badge-grid .badge .ic { width:100%; aspect-ratio:1; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:#FFD600; display:flex; align-items:center; justify-content:center; }
.pf-scope .badge-grid .badge .ic img { width:58%; height:58%; }
.pf-scope .badge-grid .badge.locked .ic { background:#E8E8E8; }
.pf-scope .badge-grid .badge.locked .ic img { filter:grayscale(1); opacity:.45; }
.pf-scope .badge-grid .badge .nm { font-family:var(--fb); font-weight:700; font-size:8px; text-align:center; line-height:1.15; }

/* modifier */
#sec-profil .pfx-edit { display:block; width:100%; margin-top:20px; border:4px solid var(--ink); background:#FFD600; box-shadow:6px 6px 0 var(--ink); padding:0; cursor:pointer; font:inherit; color:var(--ink); }
#sec-profil .pfx-edit .bd { display:block; padding:15px; font-family:var(--fd); font-size:18px; letter-spacing:1.5px; text-align:center; }
#sec-profil .pfx-edit:active { transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }
#sec-profil .pfx-note { font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:.5px; text-align:center; margin-top:14px; color: rgba(0,0,0,0.6); }

/* COMPTE : connexion Google */
#sec-profil .acct-box { margin-top:16px; }
#sec-profil .gbtn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; border:4px solid var(--ink); background:var(--paper); box-shadow:6px 6px 0 var(--ink); padding:14px; cursor:pointer; font-family:var(--fd); font-size:16px; letter-spacing:.5px; color:var(--ink); }
#sec-profil .gbtn:active { transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }
#sec-profil .gbtn[disabled] { opacity:.6; cursor:default; }
#sec-profil .gbtn .g { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid var(--ink); font-family:var(--fd); font-size:16px;
  background:conic-gradient(#EA4335 0 25%,#FBBC05 25% 50%,#34A853 50% 75%,#4285F4 75%); color:#fff; -webkit-text-stroke:0; text-shadow:0 1px 1px rgba(0,0,0,.3); }
#sec-profil .acct-hint { font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:.3px; text-align:center; margin-top:10px; color: rgba(0,0,0,0.6); line-height:1.4; }
#sec-profil .acct-on { display:flex; align-items:center; gap:12px; border:4px solid var(--ink); background:#D8F5E3; box-shadow:6px 6px 0 var(--ink); padding:13px 15px; }
#sec-profil .acct-on .ic { flex:none; width:30px; height:30px; border-radius:50%; background:#1FB85A; color:#fff; border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:16px; }
#sec-profil .acct-on .tx { text-align:left; min-width:0; }
#sec-profil .pf-uid { font-family:var(--fb); font-weight:700; font-size:10px; color:rgba(10,10,10,0.5); letter-spacing:1px; margin-top:4px; }.nm { font-family:var(--fd); font-size:17px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sec-profil .acct-out { display:block; width:100%; margin:14px 0 0; padding:12px; font-family:var(--fd); font-size:16px; letter-spacing:.5px; text-transform:uppercase; color:var(--paper); background:var(--red, #FF5252); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); cursor:pointer; }
#sec-profil .acct-out:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }

/* ============================================================
   ÉCRAN DÉTAILS D'UN JOUEUR (.pd-screen) — plein écran, réutilise .pf-scope
   ============================================================ */
.pd-screen { position:fixed; inset:0; z-index:99999; background:var(--paper); display:flex; flex-direction:column; opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease; }
.pd-screen.show { opacity:1; transform:none; }
.pd-top { flex-shrink:0; display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:4px solid var(--ink); background:var(--paper); }
.pd-back { width:42px; height:42px; flex-shrink:0; border:3px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); font-family:var(--fd); font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); }
.pd-back:active { transform:translate(3px,3px); box-shadow:none; }
.pd-title { font-family:var(--fd); font-size:18px; letter-spacing:1px; }
.pd-body { flex:1; overflow-y:auto; padding:18px 16px 16px; max-width:520px; width:100%; margin:0 auto; }
.pd-body .pd-loading { text-align:center; font-family:var(--fb); font-weight:700; font-size:12px; opacity:.55; padding:40px 0; }

/* Bannière joueur — couleur PROPRE au joueur (grade/cosmétique) → chaque carte diffère */
.pd-hero { position:relative; display:flex; align-items:center; gap:16px; border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:16px; }
.pd-hero .pd-ava { position:relative; flex-shrink:0; }
.pd-hero .pd-avabox { width:78px; height:78px; border:4px solid var(--ink); background:var(--paper); overflow:hidden; box-shadow:4px 4px 0 var(--ink); }
.pd-hero .pd-avabox > *, .pd-hero .pd-avabox img { width:100% !important; height:100% !important; display:block; border:none !important; box-shadow:none !important; }
.pd-hero .pd-ava .pf2-lv { position:absolute; bottom:-8px; right:-8px; background:var(--ink); color:var(--paper); border:3px solid var(--paper); font-family:var(--fd); font-size:11px; line-height:1; padding:3px 5px; z-index:2; }
.pd-hero .pd-hero-info { flex:1; min-width:0; }
.pd-hero .pd-nm { display:inline-block; background:var(--ink); color:var(--paper); font-family:var(--fd); font-size:22px; letter-spacing:.5px; line-height:1; padding:7px 11px; box-shadow:3px 3px 0 rgba(0,0,0,.25); word-break:break-word; }
.pd-hero .pd-hero-tags { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pd-hero .pd-grade { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border:2.5px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); font-family:var(--fd); font-size:12px; letter-spacing:.5px; }
.pd-hero .pd-grade img { width:16px; height:16px; }
/* Position au classement */
.pd-pos { position:absolute; top:-14px; right:14px; display:flex; align-items:center; padding:5px 11px; border:3px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); transform:rotate(2deg); }
.pd-pos .pd-pos-tx { display:flex; flex-direction:column; line-height:1; }
.pd-pos .n { font-family:var(--fd); font-size:21px; line-height:.95; }
.pd-pos .s { font-family:var(--fb); font-weight:700; font-size:9px; letter-spacing:1.5px; margin-top:2px; color:rgba(10,10,10,.6); }
/* couleur selon la médaille pour le top 3 */
.pd-pos.p1 { background:#FFD600; } .pd-pos.p1 .s { color:rgba(10,10,10,.7); }
.pd-pos.p2 { background:#DADADA; }
.pd-pos.p3 { background:#FF9F45; }

/* Bouton ami */
/* FOOTER fixe du détail joueur : le bouton ami est TOUJOURS visible (hors zone scrollable) */
.pd-foot { flex-shrink:0; padding:12px 16px 16px; border-top:4px solid var(--ink); background:var(--paper); max-width:520px; width:100%; margin:0 auto; }
.pd-friend { display:block; width:100%; border:4px solid var(--ink); background:var(--green,#5BE885); box-shadow:5px 5px 0 var(--ink); padding:0; cursor:pointer; font:inherit; color:var(--ink); }
.pd-friend span { display:block; padding:11px; font-family:var(--fd); font-size:15px; letter-spacing:1px; text-align:center; }
.pd-friend:active { transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }
.pd-friend[disabled] { cursor:default; }
.pd-friend.is-friend { background:var(--cyan,#5BD8E5); }   /* déjà pote : plus de "ajouter" */
.pd-friend.is-friend:active { transform:none; box-shadow:6px 6px 0 var(--ink); }
/* pastille de présence dans le hero du profil (ami uniquement) */
.pd-hero .pd-presence { display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 20px; position:relative; border:2.5px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); font-family:var(--fd); font-size:12px; letter-spacing:.5px; }
.pd-hero .pd-presence::before { content:''; position:absolute; left:7px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; border:2px solid var(--ink); background:#888; }
.pd-hero .pd-presence.online::before { background:var(--cyan,#5BD8E5); }
.pd-hero .pd-presence.playing::before { background:var(--yellow,#FFD600); }