/* ════════════════════════════════════════════════════════════════════════
   STATS WEB / GRAND ÉCRAN — maquette validée
   brandnew/drafts/saison2-web-05-stats.html (MAÇONNERIE).
   Scopé #webStats, @media ≥1024px. Rempli par renderWebStats().
   ════════════════════════════════════════════════════════════════════════ */

#webStats { display: none; }

@media (min-width: 1024px) {

  #webStats *, #webStats *::before, #webStats *::after { all: revert; box-sizing: border-box; }

  body.web-stats #webStats {
    --paper:#FFFEF7; --ink:#0A0A0A;
    --magenta:#FF2E93; --yellow:#FFD600; --cyan:#5BD8E5; --green:#5BE885;
    --red:#FF5252; --purple:#9D4EDD; --bleu:#4D7CFF; --orange:#FF9F45;
    /* --fd / --fb : hérités de <html> (la police choisie dans Réglages) */
    --bd:3px; --bdf:4px; --sh:5px; --shf:6px;
    --card:#FFFEF7; --line:#0A0A0A; --mut:rgba(10,10,10,.55); --app:#F4EEDF;
    position: fixed; inset: 0; z-index: 1200; overflow: hidden;
    display: flex; flex-direction: column; padding: 14px 24px 10px;
    font-family: var(--fb); color: var(--ink);
    font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
    background: var(--app) radial-gradient(color-mix(in srgb,var(--ink) 7%,transparent) 1.4px, transparent 1.5px);
    background-size: 22px 22px;
  }
  html[data-skin="neon"] body.web-stats #webStats {
    --paper:#160E1F; --app:#0E0814; --card:#221430; --line:#0A0A0A; --mut:#CFC3CE;
    color:#FFFEF7; background-image: repeating-linear-gradient(30deg,rgba(255,255,255,.04) 0 6px,transparent 6px 26px);
  }
  body.web-stats .topbar, body.web-stats .bottom-nav { display: none !important; }
  body.web-stats #sec-stats > .s2 { display: none !important; }
  body.web-stats { overflow: hidden; }

  #webStats img.em, #webStats img.ne, #webStats img.noto-em { height:1em; width:auto; vertical-align:-.15em; object-fit:contain; display:inline-block; }

  /* NAV */
  #webStats .nav{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex:none; width:100%; max-width:1500px; margin-inline:auto; }
  #webStats .logo{ height:58px; width:auto; display:block; flex:none; }
  #webStats .tabs{ display:flex; gap:10px; }
  #webStats .tab{ font-family:var(--fd); font-size:17px; letter-spacing:1px; padding:10px 20px; border:var(--bd) solid var(--line); background:var(--card); color:inherit; box-shadow:var(--sh) var(--sh) 0 var(--line); cursor:pointer; }
  html[data-skin="neon"] #webStats .tab{ color:#FFFEF7; }
  #webStats .tab.on{ background:var(--bleu); color:#FFFEF7; box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  #webStats .nav .sp{ flex:1; }
  #webStats .chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--fd); font-size:16px; padding:9px 14px; border:var(--bd) solid var(--line); background:var(--card); color:inherit; box-shadow:var(--sh) var(--sh) 0 var(--line); cursor:pointer; }
  html[data-skin="neon"] #webStats .chip{ color:#FFFEF7; }
  #webStats .chip.dj{ background:var(--yellow); color:#0A0A0A; }   /* encre fixe : en néon --ink devient crème, illisible sur le jaune */
  #webStats .toggle{ display:flex; border:var(--bd) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--line); cursor:pointer; }
  #webStats .toggle span{ font-family:var(--fd); font-size:14px; letter-spacing:1px; padding:8px 13px; background:var(--card); color:var(--mut); }
  #webStats .toggle span.on{ background:var(--magenta); color:#FFFEF7; }
  #webStats .ava{ width:52px; height:52px; border:var(--bdf) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--magenta); background:var(--purple); display:grid; place-items:center; font-size:26px; cursor:pointer; overflow:hidden; }
  #webStats .ava > *{ width:100%; height:100%; display:block; }
  #webStats .bento{ width:100%; max-width:1500px; margin-inline:auto; }

  /* MAÇONNERIE */
  #webStats .bento{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(8,1fr);grid-auto-flow:row dense;gap:13px}
  #webStats .b{border:var(--bdf) solid var(--line);background:var(--card);box-shadow:var(--sh) var(--sh) 0 var(--line);
    padding:13px;display:flex;flex-direction:column;overflow:hidden;position:relative}
  html[data-skin="neon"] #webStats .b{box-shadow:var(--sh) var(--sh) 0 var(--magenta)}
  #webStats .h2{grid-row:span 2}
  #webStats .w2{grid-column:span 2}
  #webStats .w4{grid-column:span 4}
  #webStats .ttl{font-family:var(--fd);font-size:12px;letter-spacing:1.4px;color:var(--mut);display:flex;align-items:center;gap:8px;margin-bottom:10px;flex:none}
  html[data-skin="neon"] #webStats .ttl{color:#CFC3CE}
  #webStats .ttl .r{margin-left:auto;font-size:11px}

  /* CARTE JOUEUR */
  #webStats .pcard{justify-content:space-between;background:var(--magenta);color:#FFFEF7;box-shadow:var(--shf) var(--shf) 0 var(--line)}
  html[data-skin="neon"] #webStats .pcard{box-shadow:var(--shf) var(--shf) 0 var(--yellow)}
  #webStats .pcard::before{content:'';position:absolute;inset:0;opacity:.13;background-image:radial-gradient(#0A0A0A 1.6px,transparent 1.7px);background-size:15px 15px}
  #webStats .pcard>*{position:relative}
  #webStats .pcard .top{display:flex;align-items:center;gap:13px}
  #webStats .pcard .av{width:70px;height:70px;flex:none;border:var(--bdf) solid var(--line);box-shadow:var(--sh) var(--sh) 0 var(--line);background:var(--purple);display:grid;place-items:center;font-size:36px;position:relative}
  #webStats .pcard .av .lv{position:absolute;right:-7px;bottom:-7px;font-family:var(--fd);font-size:12px;background:var(--yellow);color:var(--ink);border:2.5px solid var(--line);box-shadow:2px 2px 0 var(--line);padding:0 7px}
  #webStats .pcard .av > :not(.lv){ width:100%; height:100%; display:block; }   /* l'avatar remplit la case (sinon largeur 0 → carré violet vide) */
  #webStats .pcard .nm{font-family:var(--fd);font-size:28px;line-height:1}
  #webStats .pcard .rkp{font-family:var(--fb);font-weight:700;font-size:10px;letter-spacing:.8px;opacity:.9;margin-top:5px}
  #webStats .pcard .dj{margin-left:auto;flex:none;font-family:var(--fd);font-size:19px;background:var(--yellow);color:var(--ink);padding:7px 13px;border:var(--bd) solid var(--line);box-shadow:3px 3px 0 var(--line)}
  #webStats .pcard .xpbar{flex:none;height:20px;border:var(--bd) solid var(--line);background:rgba(255,255,255,.3);position:relative;overflow:hidden;margin-top:12px}
  #webStats .pcard .xpbar i{position:absolute;inset:0 auto 0 0;background:var(--yellow)}
  #webStats .pcard .xpbar .t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:11px;color:var(--ink);line-height:1}

  /* PRÉCISION */
  #webStats .acc{justify-content:center;align-items:center;text-align:center}
  #webStats .acc .big{font-family:var(--fd);font-size:58px;line-height:.9;color:var(--green)}
  html[data-skin="neon"] #webStats .acc .big{color:var(--green)}
  #webStats .acc .d{font-family:var(--fb);font-weight:700;font-size:10px;letter-spacing:.5px;color:var(--mut);margin:6px 0 9px}
  #webStats .acc .bar{width:100%;height:14px;border:var(--bd) solid var(--line);background:var(--card);position:relative;overflow:hidden}
  #webStats .acc .bar i{position:absolute;inset:0 auto 0 0;background:var(--green)}

  /* SÉRIE / RECORD */
  #webStats .duo{justify-content:space-around;gap:10px}
  #webStats .duo .row{display:flex;align-items:center;gap:11px}
  #webStats .duo .ic{width:46px;height:46px;flex:none;border:var(--bd) solid var(--line);box-shadow:3px 3px 0 var(--line);display:grid;place-items:center;font-size:24px}
  #webStats .duo .ic.a{background:var(--orange)}
  #webStats .duo .ic.b{background:var(--red)}
  #webStats .duo .v{font-family:var(--fd);font-size:30px;line-height:1}
  html[data-skin="neon"] #webStats .duo .v{color:#FFFEF7}
  #webStats .duo .l{font-family:var(--fb);font-weight:700;font-size:9px;letter-spacing:.5px;color:var(--mut);margin-top:2px}

  /* CUMUL (6 stats colorées) */
  #webStats .cumul{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;flex:1;min-height:0}
  #webStats .stat{border:var(--bd) solid var(--line);box-shadow:4px 4px 0 var(--line);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;color:var(--ink);position:relative;overflow:hidden}
  #webStats .stat .ic{font-size:26px;height:30px}
  #webStats .stat .v{font-family:var(--fd);font-size:30px;line-height:.95}
  #webStats .stat .l{font-family:var(--fb);font-weight:700;font-size:8.5px;letter-spacing:.5px;opacity:.72}
  #webStats .stat.cy{background:var(--cyan)}
  #webStats .stat.gr{background:var(--green)}
  #webStats .stat.ye{background:var(--yellow)}
  #webStats .stat.vi{background:var(--purple);color:#FFFEF7}
  #webStats .stat.or{background:var(--orange)}
  #webStats .stat.mg{background:var(--magenta);color:#FFFEF7}

  /* PAR MODE */
  #webStats .modes{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-height:0}
  #webStats .mrow{display:flex;align-items:center;gap:10px}
  /* état vide (compte neuf) : jamais un bloc blanc avec un tiret */
  #webStats .wsvide{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
  #webStats .wsvide img{height:44px;width:auto}
  #webStats .wsvide b{font-family:var(--fd);font-weight:400;font-size:20px;line-height:1;white-space:nowrap}
  #webStats .wsvide span{font-family:var(--fb);font-weight:700;font-size:9px;letter-spacing:.5px;color:var(--mut)}
  html[data-skin="neon"] #webStats .wsvide b{color:#FFFEF7}
  #webStats .mrow .ic{width:34px;height:34px;flex:none;border:2.5px solid var(--line);box-shadow:2px 2px 0 var(--line);display:grid;place-items:center;font-size:17px}
  #webStats .mrow .nm{font-family:var(--fd);font-size:14px;width:92px;flex:none}
  html[data-skin="neon"] #webStats .mrow .nm{color:#FFFEF7}
  #webStats .mrow .bar{flex:1;height:13px;border:2.5px solid var(--line);background:var(--card);position:relative;overflow:hidden}
  #webStats .mrow .bar i{position:absolute;inset:0 auto 0 0;background:var(--green)}
  #webStats .mrow .pct{font-family:var(--fd);font-size:14px;width:44px;text-align:right;flex:none}
  html[data-skin="neon"] #webStats .mrow .pct{color:var(--yellow)}

  /* RÉPARTITION (barres de parties par mode) */
  #webStats .rep{flex:1;display:flex;align-items:flex-end;justify-content:space-around;gap:14px;min-height:0;padding-top:6px}
  #webStats .rcol{flex:1;max-width:80px;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
  #webStats .rcol .bar{width:100%;border:var(--bd) solid var(--line);box-shadow:3px 3px 0 var(--line);position:relative}
  #webStats .rcol .bar .n{position:absolute;top:-20px;left:0;right:0;text-align:center;font-family:var(--fd);font-size:14px}
  html[data-skin="neon"] #webStats .rcol .bar .n{color:#FFFEF7}
  #webStats .rcol .l{font-family:var(--fb);font-weight:700;font-size:8.5px;letter-spacing:.3px;color:var(--mut)}

  /* BADGES */
  #webStats .badges{flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:11px;min-height:0}
  #webStats .badge{border:var(--bd) solid var(--line);box-shadow:3px 3px 0 var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--card);position:relative;overflow:hidden}
  #webStats .badge .e{font-size:30px}
  #webStats .badge .n{font-family:var(--fd);font-size:9px;letter-spacing:.3px;text-align:center}
  html[data-skin="neon"] #webStats .badge .n{color:#FFFEF7}
  #webStats .badge.got{background:var(--yellow);color:var(--ink)}
  #webStats .badge.lock{opacity:.5}
  #webStats .badge.lock .e{filter:grayscale(1)}


}