/* leaderboard.css — the full-screen clan LADDER (opened from the lobby nav). Render-only; data from /api/clans/leaderboard.
   Reuses the clan page's .cp-top nav. Separate from the in-match leaderboard (that one lives in game.css). */
#leaderPage { position:fixed; inset:0; z-index:60; display:none; flex-direction:column; background:#0d1017; color:#e6ebf2; }
#leaderPage.show { display:flex; }
/* nav bar — the clanpage's .cp-* rules are scoped to #clanPage, so re-state them here (self-contained, no shared vars) */
#leaderPage .cp-top { flex:0 0 auto; display:flex; align-items:center; gap:16px; padding:11px clamp(14px,2.5vw,26px); background:rgba(8,12,20,.85); border-bottom:1px solid #ffffff14; }
#leaderPage .cp-back { background:none; border:1px solid #ffffff26; color:#9aa3b2; border-radius:8px; padding:7px 13px; font:600 12px system-ui; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
#leaderPage .cp-back:hover { color:#fff; border-color:#5cc8ff; background:rgba(92,200,255,.1); }
#leaderPage .cp-brand { display:flex; align-items:baseline; gap:8px; }
#leaderPage .cp-brandsub { font:600 11px system-ui; letter-spacing:.22em; text-transform:uppercase; color:#8fb6cc; }
#leaderPage .lp-body { flex:1; overflow-y:auto; width:100%; max-width:760px; margin:0 auto; padding:18px 16px 48px; }

/* "your clan" + "your impact" header (only when signed in + in a clan) */
.lp-mine { display:none; margin-bottom:16px; padding:14px 16px; border:1px solid #2a4d63; border-radius:12px; background:linear-gradient(135deg,#15212b,#161a22); }
.lp-mine.show { display:block; }
.lp-mine .lp-mtitle { font:600 11px/1 system-ui; color:#8fb6cc; text-transform:uppercase; letter-spacing:.07em; margin-bottom:9px; }
.lp-mine .lp-mrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lp-mine .lp-mtag { font:800 16px system-ui; color:#bfe2f2; }
.lp-mine .lp-mrank { font:700 14px system-ui; color:#f0d889; }
.lp-mine .lp-mpts { font:800 18px system-ui; color:#fff; margin-left:auto; }
.lp-mine .lp-impact { width:100%; margin-top:10px; font:600 13px system-ui; color:#9aa3b2; }
.lp-mine .lp-impact b { color:#7fd1a8; }

.lp-head, .lp-row { display:grid; grid-template-columns:48px 1fr 92px; align-items:center; gap:8px; padding:9px 12px; }
.lp-head { font:600 11px system-ui; color:#6e7a8a; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid #1e2530; }
.lp-row { border-bottom:1px solid #161b24; }
.lp-row:hover { background:#131822; }
.lp-row.me { background:#16242e; border-left:3px solid #2c9fd6; }
.lp-rk { font:800 15px system-ui; color:#8a93a3; text-align:center; }
.lp-row.pod1 .lp-rk { color:#f0d889; }   /* gold */
.lp-row.pod2 .lp-rk { color:#cdd5e2; }   /* silver */
.lp-row.pod3 .lp-rk { color:#cd9b6a; }   /* bronze */
.lp-clan { display:flex; flex-direction:column; min-width:0; }
.lp-clan .lp-tag { font:800 14px system-ui; color:#e6ebf2; }
.lp-clan .lp-name { font:500 12px system-ui; color:#8a93a3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-pts { font:800 16px system-ui; color:#bfe2f2; text-align:right; }
.lp-empty { padding:44px 12px; text-align:center; color:#6e7a8a; font:500 14px system-ui; }

@media (max-width:640px){
  .lp-head, .lp-row { grid-template-columns:38px 1fr 72px; padding:8px 6px; gap:6px; }
  .lp-mine .lp-mpts { font-size:16px; }
}