/* ============================================================
   STATS V2 — scopé #sec-stats
   Carte d'identité · bloc RANG · cumul · par mode · badges à rareté
   ============================================================ */
@keyframes st-twinkle { 0%,100%{transform:scale(1) rotate(0);} 40%{transform:scale(1.18) rotate(12deg);filter:brightness(1.3);} }

/* on neutralise le padding par défaut de .sec : les blocs gèrent leur marge */
#sec-stats.sec { padding: 0 0 16px; }
#sec-stats * { box-sizing: border-box; }
#sec-stats { font-family: var(--fb); }

/* ---- divider de section ---- */
#sec-stats .sdiv { display:flex; align-items:center; gap:10px; margin:26px 18px 12px; }
#sec-stats .sdiv .bar { flex:1; height:3px; background:var(--ink); }
#sec-stats .sdiv .bar.l { flex:0 0 22px; }
#sec-stats .sdiv .t { font-family:var(--fd); font-size:14px; letter-spacing:3px; }
#sec-stats .sdiv .count { position:relative; transform:rotate(2deg); }
#sec-stats .sdiv .count::before { content:''; position:absolute; top:3px; left:3px; right:-3px; bottom:-3px; background:var(--ink); }
#sec-stats .sdiv .count .b { position:relative; padding:3px 8px; border:2.5px solid var(--ink); background:#FF2E93; color:var(--paper); font-family:var(--fd); font-size:11px; letter-spacing:1px; }

/* ---- HERO ID ---- */
/* carte identité ALIGNÉE sur le Profil (pf2-id) : droite, ombre 6px, avatar 84px + tag niveau */
#sec-stats .hero { padding:18px 18px 4px; }
#sec-stats .hero .card { position:relative; }
#sec-stats .hero .bd { border:4px solid var(--ink); background:var(--paper); box-shadow:6px 6px 0 var(--ink); padding:16px; }
#sec-stats .hero .top { display:flex; align-items:center; gap:16px; }
#sec-stats .hero .ava { position:relative; flex-shrink:0; }
#sec-stats .hero .ava .fr { width:84px; height:84px; border:4px solid var(--ink); background:var(--paper); overflow:hidden; box-shadow:4px 4px 0 var(--ink); }
#sec-stats .hero .ava .fr img { width:100%; height:100%; display:block; }
#sec-stats .hero .ava .fr .ava-emo { width:100%; height:100%; border:none; box-shadow:none; }
#sec-stats .hero .ava .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); }
#sec-stats .hero .meta { flex:1; min-width:0; }
#sec-stats .hero .meta .lbl { font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:2px; color: rgba(10,10,10,0.55); }
#sec-stats .hero .meta .nm { font-family:var(--fd); font-size:30px; line-height:30px; margin:4px 0 9px; word-break:break-word; }
#sec-stats .hero .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); }
#sec-stats .hero .flag img { width:18px; height:13px; border:1px solid var(--ink); }
#sec-stats .hero .flag span { font-family:var(--fd); font-size:12px; letter-spacing:1px; }
#sec-stats .hero .cur { margin-top:14px; display:flex; gap:10px; }
#sec-stats .hero .pill { position:relative; border:0; background:none; padding:0; cursor:pointer; font:inherit; text-align:left; height:auto; display:inline-block; box-shadow:none; }   /* annule la fuite de proto.css .pill (height:30px / box-shadow / inline-flex) */
#sec-stats .hero .pill::before { content:''; position:absolute; top:4px; left:4px; right:-4px; bottom:-4px; background:var(--ink); }
#sec-stats .hero .pill .b { position:relative; padding:7px 12px; border:3px solid var(--ink); display:flex; align-items:baseline; gap:6px; transition:transform .08s ease; }
#sec-stats .hero .pill:active .b { transform:translate(2px,2px); }
#sec-stats .hero .pill .ic { width:20px; height:20px; border:2px solid var(--ink); background:var(--paper); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; align-self:center; }
#sec-stats .hero .pill .ic img { width:14px; height:14px; }
#sec-stats .hero .pill .v { font-family:var(--fd); font-size:22px; line-height:22px; }
#sec-stats .hero .pill .k { font-family:var(--fb); font-weight:700; font-size:9px; letter-spacing:1.5px; opacity:.85; }
#sec-stats .hero .pill.xp { transform:rotate(-2deg); } #sec-stats .hero .pill.xp .b { background:#FF2E93; color:var(--paper); }
#sec-stats .hero .pill.co { transform:rotate(2deg); } #sec-stats .hero .pill.co .b { background:#FFD600; }

/* ---- RANG ---- */
#sec-stats .rank { padding:16px 18px 4px; }
#sec-stats .rank .card { position:relative; }
#sec-stats .rank .card::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--ink); }
#sec-stats .rank .bd { position:relative; border:4px solid var(--ink); background:#5BE885; padding:14px; }
#sec-stats .rank .head { display:flex; align-items:center; gap:13px; }
#sec-stats .rank .badge { width:62px; height:62px; flex-shrink:0; border:3px solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--ink); display:flex; align-items:center; justify-content:center; transform:rotate(-3deg); }
#sec-stats .rank .badge img { width:42px; height:42px; }
#sec-stats .rank .info { flex:1; min-width:0; }
#sec-stats .rank .info .k { font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:2px; opacity:.7; }
#sec-stats .rank .info .nm { font-family:var(--fd); font-size:30px; line-height:30px; letter-spacing:.5px; }
#sec-stats .rank .lvl { font-family:var(--fd); font-size:11px; letter-spacing:1px; background:var(--ink); color:var(--paper); padding:3px 8px; align-self:flex-start; }
#sec-stats .rank .next { margin-top:12px; }
#sec-stats .rank .next .row { display:flex; justify-content:space-between; gap:8px; font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:.5px; margin-bottom:5px; }
#sec-stats .rank .prog { position:relative; height:18px; border:3px solid var(--ink); background:var(--paper); overflow:hidden; }
#sec-stats .rank .prog .fill { position:absolute; inset:0 auto 0 0; background:#FF2E93; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 6px,transparent 6px 12px); }
#sec-stats .rank .prog .lab { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:10px; letter-spacing:1px; }
#sec-stats .rank .rk-cta { margin-top:12px; width:100%; display:flex; align-items:center; justify-content:center; gap:6px; border:3px solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--ink); padding:9px; font-family:var(--fd); font-size:13px; letter-spacing:1.5px; cursor:pointer; color:var(--ink); }
#sec-stats .rank .rk-cta:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }

/* ---- CUMUL ---- */
#sec-stats .stats { padding:4px 18px 0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
#sec-stats .st { position:relative; }
#sec-stats .st::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--ink); }
#sec-stats .st .b { position:relative; border:4px solid var(--ink); padding:12px 14px; min-height:80px; height:100%; box-sizing:border-box; overflow:hidden; }
/* emoji animé décoratif en arrière-plan (Noto GIF), clippé par .b, sous le texte */
#sec-stats .st .bg-emo { position:absolute; right:-12px; bottom:-14px; width:80px; height:80px; opacity:.2; pointer-events:none; z-index:0; transform:rotate(-8deg); }
#sec-stats .st.d2 .bg-emo { opacity:.26; }   /* fond magenta foncé -> emoji un peu plus présent */
#sec-stats .st .l, #sec-stats .st .v, #sec-stats .st .d { position:relative; z-index:1; }
#sec-stats .st .l { font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:2px; opacity:.7; }
#sec-stats .st .v { font-family:var(--fd); font-size:36px; line-height:40px; margin-top:2px; }
#sec-stats .st .d { font-family:var(--fb); font-weight:700; font-size:9px; letter-spacing:1px; margin-top:4px; opacity:.55; }
#sec-stats .st.a { transform:rotate(-2deg); } #sec-stats .st.a .b { background:#FFD600; }
#sec-stats .st.b2 { transform:rotate(2deg); } #sec-stats .st.b2 .b { background:#5BE885; }
#sec-stats .st.c { transform:rotate(-1deg); } #sec-stats .st.c .b { background:#5BD8E5; }
#sec-stats .st.d2 { transform:rotate(2deg); } #sec-stats .st.d2 .b { background:#FF2E93; color:var(--paper); }

/* ---- PAR MODE (cartes injectées par JS) ---- */
#sec-stats .modes-row { padding:0 18px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#sec-stats .mode-card { position:relative; }
#sec-stats .mode-card::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--ink); }
/* height:100% -> le body remplit la cellule étirée par la grille ; sinon l'ombre ::before
   dépasse sous les cartes au libellé court (ex. LA BOMBE vs QUITTE OU DOUBLE sur 2 lignes) */
#sec-stats .mode-card .body { position:relative; border:4px solid var(--ink); padding:14px; min-height:130px; height:100%; box-sizing:border-box; }
#sec-stats .mode-card.classique .body { background:#5BD8E5; }
#sec-stats .mode-card.duel .body { background:#E63946; color:var(--paper); }
#sec-stats .mode-card.battle .body { background:#FF5252; color:var(--paper); }
#sec-stats .mode-card.bombe .body { background:#FFD600; }
#sec-stats .mode-card.qod .body { background:#9D4EDD; color:var(--paper); }
#sec-stats .mode-card.marathon .body { background:#5BE885; }
#sec-stats .mode-card.mise .body { background:#FF2E93; color:var(--paper); }
#sec-stats .mode-card.buzzer .body { background:#FF9100; }
#sec-stats .mode-card.equipe .body { background:#1DE9B6; }
#sec-stats .mode-card.soiree .body { background:var(--paper); }
#sec-stats .mode-card.quiz .body { background:#4285F4; color:var(--paper); }
#sec-stats .mode-empty { grid-column:1 / -1; border:3px dashed rgba(10,10,10,.3); padding:18px 14px; text-align:center; font-family:var(--fb); font-weight:700; font-size:12px; line-height:1.5; color: rgba(10,10,10,0.6); }
#sec-stats .mode-card .icon-box { width:38px; height:38px; border:3px solid var(--ink); background:var(--paper); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:8px; }
#sec-stats .mode-card .icon-box img { width:100%; height:100%; display:block; }
#sec-stats .mode-card .name { font-family:var(--fd); font-size:22px; line-height:22px; letter-spacing:1px; }
#sec-stats .mode-card .row { display:flex; justify-content:space-between; margin-top:8px; font-family:var(--fb); font-weight:700; font-size:11px; }
#sec-stats .mode-card .winrate-stamp { position:absolute; top:-8px; right:-8px; transform:rotate(8deg); padding:3px 8px; border:3px solid var(--ink); background:var(--paper); font-family:var(--fd); font-size:13px; box-shadow:3px 3px 0 var(--ink); color:var(--ink); }

/* ---- BADGES à rareté ---- */
#sec-stats .legend { display:flex; gap:8px; flex-wrap:wrap; padding:0 18px 4px; }
#sec-stats .legend .it { display:inline-flex; align-items:center; gap:4px; font-family:var(--fb); font-weight:700; font-size:9px; letter-spacing:.5px; }
#sec-stats .legend .dot { width:11px; height:11px; border:2px solid var(--ink); }
#sec-stats .legend .dot.comm { background:#B8B8B8; } #sec-stats .legend .dot.rare { background:#5BD8E5; }
#sec-stats .legend .dot.epic { background:#9D4EDD; } #sec-stats .legend .dot.lege { background:#FFD600; }

#sec-stats .badges-grid { padding:8px 18px 0; display:grid; grid-template-columns:1fr 1fr; gap:13px; }
#sec-stats .bdg { position:relative; }
#sec-stats .bdg::before { content:''; position:absolute; top:5px; left:5px; right:-5px; bottom:-5px; background:var(--ink); }
#sec-stats .bdg .b { position:relative; border:3px solid var(--ink); background:var(--paper); padding:13px 10px 9px; display:flex; flex-direction:column; align-items:center; gap:6px; min-height:138px; }
#sec-stats .bdg .rar { position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-2deg); padding:2px 8px; border:2.5px solid var(--ink); font-family:var(--fd); font-size:9px; letter-spacing:1px; box-shadow:2px 2px 0 var(--ink); white-space:nowrap; z-index:3; }
#sec-stats .bdg.comm .rar { background:#B8B8B8; } #sec-stats .bdg.rare .rar { background:#5BD8E5; }
#sec-stats .bdg.epic .rar { background:#9D4EDD; color:var(--paper); } #sec-stats .bdg.lege .rar { background:#FFD600; }
#sec-stats .bdg .em { width:46px; height:46px; margin-top:2px; } #sec-stats .bdg .em img { width:100%; height:100%; }
#sec-stats .bdg .nm { font-family:var(--fd); font-size:13px; letter-spacing:.5px; text-align:center; line-height:13px; }
#sec-stats .bdg .co { font-family:var(--fb); font-weight:700; font-size:8.5px; letter-spacing:.3px; color: rgba(10,10,10,0.6); text-align:center; line-height:11px; }
#sec-stats .bdg .rw { display:flex; gap:5px; margin-top:auto; }
#sec-stats .bdg .rw span { display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border:2px solid var(--ink); background:var(--paper); font-family:var(--fd); font-size:10px; }
#sec-stats .bdg .rw img { width:11px; height:11px; }
#sec-stats .bdg .mini { width:100%; height:13px; border:2.5px solid var(--ink); background:var(--paper); position:relative; overflow:hidden; margin-top:auto; }
#sec-stats .bdg .mini .f { position:absolute; inset:0 auto 0 0; background:#5BE885; }
#sec-stats .bdg .mini .t { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:8px; letter-spacing:.5px; }
#sec-stats .bdg.lege .b { background:#FFFBEA; }
#sec-stats .bdg.locked .b { background:#E8E8E8; background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(10,10,10,.06) 6px 8px); }
#sec-stats .bdg.locked .em img { filter:grayscale(1) opacity(.6); }
#sec-stats .bdg.locked .nm { color: rgba(10,10,10,0.5); }
#sec-stats .bdg .lk { position:absolute; top:-7px; right:-7px; width:24px; height:24px; border:2.5px solid var(--ink); background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:11px; transform:rotate(8deg); box-shadow:2px 2px 0 #FFD600; z-index:4; }
#sec-stats .anim-twinkle { animation:st-twinkle 1.6s ease-in-out infinite; }

/* ---- EMPTY STATE ---- */
#sec-stats .empty-card { margin:20px 18px; position:relative; transform:rotate(-1deg); }
#sec-stats .empty-card::before { content:''; position:absolute; top:7px; left:7px; right:-7px; bottom:-7px; background:var(--ink); }
#sec-stats .empty-card .bd { position:relative; border:4px solid var(--ink); background:#FFD600; padding:24px 18px; text-align:center; }
#sec-stats .empty-card .em { width:84px; height:84px; display:inline-block; } #sec-stats .empty-card .em img { width:100%; height:100%; }
#sec-stats .empty-card .title { font-family:var(--fd); font-size:28px; line-height:30px; letter-spacing:1px; margin-top:8px; }
#sec-stats .empty-card .sub { font-family:var(--fb); font-weight:700; font-size:11px; line-height:16px; margin-top:8px; color: rgba(10,10,10,0.75); }