/* BO1 // STATS — theme Black Ops : charbon, jaune munition, stencil militaire.
   Zero dependance, zero font externe (CSP self). Mobile-first ensuite elargi. */

:root{
  --bg:#0b0b09; --bg2:#111310; --card:#16181396; --card-solid:#161813;
  --line:#2a2d24; --line-hl:#3d4132;
  --tx:#e8e6dc; --dim:#9a9a8c; --faint:#6b6b5e;
  --amber:#ffb400; --amber2:#ffd257; --orange:#ff7a1a; --red:#ff4d3a; --green:#7cfc00;
  --gold:#ffc93c; --silver:#c9d1d9; --bronze:#d08a4e;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--tx);font:15px/1.55 system-ui,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(1200px 500px at 80% -100px, #2a240955, transparent 60%),
    radial-gradient(900px 400px at 0% 30%, #16200a3d, transparent 60%),
    var(--bg);
}
/* grain + scanlines discrets, en pur CSS */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:repeating-linear-gradient(0deg, transparent 0 2px, #00000022 2px 3px);
}
main,header,footer{position:relative;z-index:1}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
a{color:var(--amber2)}

/* ---------------- topbar ---------------- */
.topbar{position:sticky;top:0;z-index:50;background:#0b0b09ee;border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:54px}
.brand{font-weight:900;letter-spacing:.18em;font-size:18px}
.brand-b{color:var(--amber)}
.brand-sep{color:var(--faint);margin:0 6px}
.brand-s{color:var(--tx)}
.top-right{display:flex;align-items:center;gap:12px;max-width:70%;min-width:0}
#langSel{background:#161813;color:var(--tx);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12.5px;max-width:130px}
.sec-title em{font-style:normal}
.live{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);font-family:var(--mono);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dot{width:9px;height:9px;border-radius:50%;background:#555;flex:none}
.dot.on{background:var(--green);box-shadow:0 0 8px var(--green)}
.dot.off{background:var(--red)}

/* ---------------- hero ---------------- */
.hero{padding:56px 0 30px;text-align:center;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#14160f66,transparent)}
.hero-kicker{color:var(--amber);letter-spacing:.28em;text-transform:uppercase;font-size:11px;font-weight:700}
h1{font-size:clamp(30px,6vw,58px);margin:10px 0 6px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(180deg,var(--amber2),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 12px #ffb40028)}
.hero-sub{color:var(--dim);margin:0 0 26px}
.hero-sub b{color:var(--tx)}

/* recherche */
.search{position:relative;max-width:560px;margin:0 auto;display:flex;align-items:center;
  background:var(--card-solid);border:1px solid var(--line-hl);border-radius:12px;padding:0 14px;
  box-shadow:0 6px 30px #00000088}
.search:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px #ffb40022,0 6px 30px #000000aa}
.search-ico{color:var(--faint);flex:none}
.search input{flex:1;background:none;border:0;outline:0;color:var(--tx);font-size:17px;padding:15px 12px}
.search input::placeholder{color:var(--faint)}
.search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#14160fF2;border:1px solid var(--line-hl);
  border-radius:12px;max-height:340px;overflow:auto;z-index:40;text-align:left;backdrop-filter:blur(8px)}
.sr-row{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid #ffffff0a}
.sr-row:hover{background:#ffb40011}
.sr-rank{font-family:var(--mono);color:var(--amber);min-width:44px;font-size:13px}
.sr-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-meta{color:var(--dim);font-size:12.5px;font-family:var(--mono)}
.sr-empty{padding:14px;color:var(--dim)}

/* compteurs */
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:760px;margin:30px auto 0}
.counter{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 8px}
.counter b{display:block;font-size:clamp(20px,3vw,30px);font-family:var(--mono);color:var(--amber2)}
.counter span{color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.08em}

/* ---------------- sections ---------------- */
.section{padding:38px 0 8px}
.sec-title{font-size:19px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;font-weight:800}
.sec-title span{color:var(--amber);margin-right:6px}
.sec-note{color:var(--dim);font-size:13px;margin:-6px 0 16px}
.sub-title{color:var(--dim);font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}

/* ---------------- podium ---------------- */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end}
.pod{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 16px;text-align:center;cursor:pointer;
  transition:transform .15s,border-color .15s;position:relative;overflow:hidden}
.pod:hover{transform:translateY(-4px);border-color:var(--amber)}
.pod::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 55%,#ffb40009)}
/* badges de rang en CSS pur (les emoji medailles ne rendent pas partout) */
.pod .medal{width:46px;height:46px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:20px;color:#141414;font-family:var(--mono)}
.pod.g .medal{background:linear-gradient(160deg,#ffe08a,var(--gold));box-shadow:0 0 18px #ffc93c55}
.pod.s .medal{background:linear-gradient(160deg,#e8eef4,var(--silver))}
.pod.b .medal{background:linear-gradient(160deg,#e8b184,var(--bronze))}
.pod .p-name{font-weight:800;font-size:18px;margin:8px 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .p-kills{font-family:var(--mono);font-size:26px;color:var(--amber2)}
.pod .p-sub{color:var(--dim);font-size:12.5px;font-family:var(--mono)}
.pod.g{border-color:#ffc93c66;padding-top:30px}
.pod.s{border-color:#c9d1d933}
.pod.b{border-color:#d08a4e33}
.pod.g .medal{filter:drop-shadow(0 0 10px #ffc93c66)}

/* ---------------- records ---------------- */
.records{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.rec{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;transition:border-color .15s}
.rec:hover{border-color:var(--amber)}
.rec .r-label{color:var(--dim);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em}
.rec .r-value{font-family:var(--mono);font-size:22px;color:var(--amber2);margin:2px 0}
.rec .r-name{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- leaderboard ---------------- */
.lb-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.lb-tabs button{background:var(--card-solid);color:var(--dim);border:1px solid var(--line);border-radius:9px;
  padding:8px 16px;cursor:pointer;font-weight:700;font-size:13.5px;letter-spacing:.04em}
.lb-tabs button.on{color:#141414;background:linear-gradient(180deg,var(--amber2),var(--amber));border-color:var(--amber)}
.lb{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.lb-head,.lb-row{display:grid;grid-template-columns:64px 1fr 90px 90px 80px 80px 110px;gap:0;align-items:center}
.lb-head{background:#0d0f0a;color:var(--faint);font-size:11px;text-transform:uppercase;letter-spacing:.1em;padding:10px 14px}
.lb-row{padding:11px 14px;border-top:1px solid #ffffff08;cursor:pointer;transition:background .12s}
.lb-row:hover{background:#ffb4000d}
.lb-rank{font-family:var(--mono);color:var(--amber);font-weight:700}
.lb-rank.top{color:var(--gold)}
.lb-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:10px}
.lb-cell{font-family:var(--mono);font-size:13.5px;color:var(--tx);text-align:right}
.lb-cell.dim{color:var(--dim)}
.lb-cell.hl{color:var(--amber2);font-weight:700}
.lb-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:16px 0}
.lb-pager button{background:var(--card-solid);color:var(--tx);border:1px solid var(--line);border-radius:9px;padding:8px 16px;cursor:pointer}
.lb-pager button:disabled{opacity:.35;cursor:default}
.lb-pager span{color:var(--dim);font-family:var(--mono);font-size:13px}

/* ---------------- barres maps / activite ---------------- */
.bars{display:flex;flex-direction:column;gap:9px}
.bar{position:relative;background:#0d0f0a;border:1px solid var(--line);border-radius:8px;height:34px;overflow:hidden}
.bar-fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#3d3a10,#8a6d00);transition:width .8s cubic-bezier(.2,.7,.2,1)}
.bar-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:13px}
.bar-label b{font-weight:700}
.bar-label span{font-family:var(--mono);color:var(--amber2);font-size:12.5px}
.hours{display:flex;align-items:flex-end;gap:3px;height:110px}
.hcol{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.hbar{width:100%;background:linear-gradient(180deg,var(--amber),#6b4c00);border-radius:3px 3px 0 0;min-height:2px;transition:height .6s}
.hlab{font-size:9.5px;color:var(--faint);font-family:var(--mono)}
.days{display:flex;align-items:flex-end;gap:5px;height:90px}
.dcol{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.dbar{width:100%;background:linear-gradient(180deg,var(--green),#2c5c00);border-radius:3px 3px 0 0;min-height:2px}
.dlab{font-size:9.5px;color:var(--faint);font-family:var(--mono)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:34px}

/* ---------------- rejoindre / footer ---------------- */
.join{padding-bottom:40px}
.join-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.join-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;color:var(--dim)}
.join-card b{color:var(--amber);font-size:18px;margin-right:6px}
.hl{color:var(--tx);font-weight:700}
footer{border-top:1px solid var(--line);margin-top:30px;padding:18px 0;color:var(--faint);font-size:12.5px}
footer .wrap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* ---------------- fiche joueur ---------------- */
.player-overlay{position:fixed;inset:0;z-index:100;background:#000000c9;backdrop-filter:blur(4px);
  display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:4vh 12px 40px}
.player-overlay[hidden]{display:none}   /* display:flex ecrase l'attribut hidden sinon (vecu 19/07) */
.player-sheet{position:relative;background:#101208;border:1px solid var(--line-hl);border-radius:16px;
  max-width:860px;width:100%;padding:26px 26px 30px;box-shadow:0 20px 80px #000}
.sheet-close{position:absolute;top:14px;right:14px;background:#1c1e16;color:var(--dim);border:1px solid var(--line);
  border-radius:8px;width:36px;height:36px;cursor:pointer;font-size:15px}
.sheet-close:hover{color:var(--tx);border-color:var(--amber)}
.loading{color:var(--dim);text-align:center;padding:40px}
.ps-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:2px}
.ps-name{font-size:clamp(22px,4vw,34px);font-weight:900;letter-spacing:.04em}
.ps-rank{font-family:var(--mono);color:var(--amber);font-size:15px}
.ps-rank b{font-size:19px}
.ps-alias{color:var(--faint);font-size:12.5px;margin-bottom:4px}
.ps-dates{color:var(--dim);font-size:12.5px;font-family:var(--mono);margin-bottom:18px}
.ps-unranked{display:inline-block;background:#3a2c0d;color:var(--amber2);border-radius:6px;padding:2px 8px;font-size:11.5px;margin-left:8px}
.ps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-bottom:24px}
.ps-tile{background:#161813;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ps-tile b{display:block;font-family:var(--mono);font-size:19px;color:var(--amber2)}
.ps-tile.red b{color:var(--red)}
.ps-tile.green b{color:var(--green)}
.ps-tile span{color:var(--dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}
.ps-sec{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:800;margin:22px 0 10px}
.wp-row{display:grid;grid-template-columns:1fr 220px;gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid #ffffff08}
.wp-info b{font-size:14px}
.wp-att{color:var(--faint);font-size:11.5px;margin-left:6px}
.wp-meta{color:var(--dim);font-size:11.5px;font-family:var(--mono)}
.wp-bar{background:#0d0f0a;border-radius:6px;height:20px;position:relative;overflow:hidden;border:1px solid var(--line)}
.wp-fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#5c4a00,var(--amber));transition:width .7s}
.wp-kills{position:absolute;right:8px;top:0;bottom:0;display:flex;align-items:center;font-family:var(--mono);font-size:12px;color:#fff;text-shadow:0 1px 2px #000}
.hit-rows{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px}
.hit-row{display:flex;align-items:center;gap:10px;font-size:13px}
.hit-row .h-label{min-width:64px;color:var(--dim)}
.hit-row .h-track{flex:1;background:#0d0f0a;border:1px solid var(--line);height:14px;border-radius:5px;overflow:hidden;position:relative}
.hit-row .h-fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#5a1610,var(--red));transition:width .7s}
.hit-row .h-pct{font-family:var(--mono);color:var(--tx);min-width:48px;text-align:right;font-size:12.5px}
.mod-chips{display:flex;flex-wrap:wrap;gap:8px}
.mod-chip{background:#161813;border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:12.5px;color:var(--dim)}
.mod-chip b{color:var(--tx);font-family:var(--mono);margin-left:5px}
.sess{display:flex;flex-wrap:wrap;gap:8px}
.sess span{background:#161813;border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-family:var(--mono);font-size:12px;color:var(--dim)}

/* ---------------- responsive mobile ---------------- */
@media (max-width:820px){
  .two-col{grid-template-columns:1fr}
  .join-cards{grid-template-columns:1fr}
  .counters{grid-template-columns:repeat(2,1fr)}
  .podium{grid-template-columns:1fr;align-items:stretch}
  .pod.g{order:-1}
  .lb-head{display:none}
  .lb-row{grid-template-columns:44px 1fr auto;grid-template-areas:"rank name kills" "rank meta kills";row-gap:2px;padding:12px 14px}
  .lb-rank{grid-area:rank}
  .lb-name{grid-area:name}
  .lb-kills-m{grid-area:kills}
  .lb-meta-m{grid-area:meta;color:var(--dim);font-size:12px;font-family:var(--mono)}
  .lb-cell{display:none}
  .lb-cell.lb-kills-m{display:block;font-weight:700;font-size:15px}
  .wp-row{grid-template-columns:1fr}
  .hit-rows{grid-template-columns:1fr}
  .hlab:nth-child(odd){display:none}
  .player-overlay{padding:0}
  .player-sheet{border-radius:0;min-height:100vh;padding:20px 16px 40px}
}
@media (min-width:821px){
  .lb-kills-m,.lb-meta-m{display:none}
}