/* Reuses the same custom-property palette as styles.css/homepage-styles.css
   (asphalt/motorway-blue/chevron-amber/etc) rather than redefining it, so
   the leaderboards page can't visually drift from the rest of the site.
   All rules scoped under .waws-page, same convention as everywhere else. */

.waws-page{
  --asphalt:#1C1E22;
  --asphalt-soft:#33363D;
  --motorway-blue:#00539E;
  --motorway-blue-dark:#003C74;
  --verge-green:#00693E;
  --concrete:#E9EAE4;
  --concrete-line:#D3D5CB;
  --chevron-amber:#F2A900;
  --sign-white:#FFFFFF;
  --ok-green:#1E7B4D;
  --stale-red:#B23A2E;

  background:var(--concrete);
  color:var(--asphalt);
  font-family:'Inter',sans-serif;
  max-width:1100px;
  margin:0 auto;
  padding:0 0 60px;
}
.waws-page, .waws-page *{ box-sizing:border-box; }
.waws-page a{ color:inherit; text-decoration:none; }
.waws-page .sign-font{ font-family:'Barlow Condensed',sans-serif; font-weight:800; letter-spacing:0.02em; text-transform:uppercase; }
.waws-page .mono{ font-family:'IBM Plex Mono',monospace; }

.waws-page .leaderboard-hero{
  background:var(--motorway-blue);
  color:var(--sign-white);
  padding:32px 24px 26px;
  text-align:center;
}
.waws-page .leaderboard-hero-title{ font-size:40px; line-height:1; margin-bottom:8px; }
.waws-page .leaderboard-hero-sub{ font-size:14px; opacity:0.9; }

.waws-page .leaderboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:18px;
  padding:20px 16px 0;
}

.waws-page .lb-card{
  background:var(--sign-white);
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.waws-page .lb-card-head{
  padding:16px 18px 12px;
  border-bottom:2px solid var(--concrete-line);
}
.waws-page .lb-card-title{ font-size:19px; line-height:1.1; margin-bottom:3px; }
.waws-page .lb-card-tagline{ font-size:12.5px; color:var(--asphalt-soft); }

.waws-page .lb-rows{ display:flex; flex-direction:column; }
.waws-page .lb-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 18px;
  border-bottom:1px solid var(--concrete-line);
  color:var(--asphalt);
}
.waws-page .lb-row:last-child{ border-bottom:none; }
.waws-page .lb-row:hover{ background:var(--concrete); }

.waws-page .lb-rank{
  width:26px; height:26px; flex-shrink:0;
  border-radius:50%;
  background:var(--concrete);
  color:var(--asphalt-soft);
  font-family:'IBM Plex Mono',monospace;
  font-weight:700;
  font-size:12.5px;
  display:flex; align-items:center; justify-content:center;
}
.waws-page .lb-row-first .lb-rank{
  background:var(--chevron-amber);
  color:var(--asphalt);
}

.waws-page .lb-info{ flex:1; min-width:0; }
.waws-page .lb-name{
  font-weight:700; font-size:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.waws-page .lb-sub{ font-size:11px; color:var(--asphalt-soft); margin-top:1px; }

.waws-page .lb-value{
  flex-shrink:0;
  font-weight:700;
  font-size:13.5px;
  color:var(--motorway-blue);
}
.waws-page .lb-row-first .lb-value{ color:var(--motorway-blue-dark); }

.waws-page .lb-empty{
  padding:16px 18px;
  font-size:13px;
  color:var(--asphalt-soft);
  font-style:italic;
}

.waws-page .empty-state{
  padding:40px 20px;
  text-align:center;
  color:var(--asphalt-soft);
  font-size:14px;
}

@media(max-width:480px){
  .waws-page .leaderboard-hero-title{ font-size:30px; }
  .waws-page .leaderboard-grid{ grid-template-columns:1fr; padding:16px 12px 0; }
}