:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#16a34a;
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.02);
  font-size:16px;
}
*{box-sizing:border-box}
html,body,#board{height:100%}
body{
  margin:0;padding:32px;min-height:100vh;background:linear-gradient(180deg,#071022 0%, #071827 60%);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;color:#e6eef6;
}
.container{max-width:920px;margin:0 auto}
.header{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.header h1{margin:0;font-size:1.6rem}
.subtitle{margin:0;color:var(--muted)}
.controls{display:flex;align-items:center;justify-content:flex-start;margin-bottom:18px}
.segmented{display:inline-flex;background:var(--glass-2);padding:4px;border-radius:12px}
.seg-btn{background:transparent;border:0;color:var(--muted);padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:600}
.seg-btn.active{background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));color:#e6eef6}
.board{display:grid;grid-template-columns:1fr;gap:12px}
.card{display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 1px 0 rgba(255,255,255,0.02) inset}
.avatar{width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,#123 0%, #234 100%);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:18px}
.meta{flex:1}
.name{font-size:1.05rem;margin:0}
.club{color:var(--muted);font-size:0.9rem;margin-top:4px}
.distance{font-weight:800;font-size:1.1rem;color:var(--accent)}
.rank{width:36px;height:36px;border-radius:8px;background:var(--glass);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted)}
.footer{margin-top:20px;color:var(--muted);font-size:0.9rem}

@media(min-width:700px){
  .board{grid-template-columns:1fr}
}