/* Ball Knowledge - Daily Circuit leaderboard page */
.cl-page{padding-top:20px;padding-bottom:40px}
.cl-head h1{font-family:var(--font-display,'Jersey 15',sans-serif);font-size:42px;line-height:1.05;margin:0 0 6px}
.cl-head p{color:var(--dim);margin:0 0 14px;max-width:62ch;line-height:1.5}
.cl-tabs{display:flex;gap:6px;margin:6px 0 4px}
.cl-tabs button{cursor:pointer;border:1px solid var(--surface-line);background:var(--surface);color:var(--white);border-radius:999px;padding:8px 16px;font:700 14px/1 var(--font-body)}
.cl-tabs button.on{background:linear-gradient(135deg,#ffb347,#ff7a2e);color:#111;border-color:transparent}
.cl-range{color:var(--dim);font-size:13px;margin:6px 2px 10px;min-height:1.2em}
.cl-card{background:var(--surface);border:1px solid var(--surface-line);border-radius:14px;padding:6px 14px 10px;margin-bottom:14px}
.cl-remind{padding:12px 16px 14px}
.cl-remind h2,.cl-info h2{font-size:17px;margin:4px 0 8px}
.cl-empty{color:var(--dim);padding:18px 4px;margin:0}
.cl-row{display:grid;grid-template-columns:36px 1fr auto auto;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--surface-line)}
.cl-row:last-child{border-bottom:0}
.cl-row.head{color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:8px 4px}
.cl-rank{font-weight:800;font-size:16px;text-align:center;color:var(--dim)}
.cl-row.r1 .cl-rank{color:#ffd24a}.cl-row.r2 .cl-rank{color:#cfd6df}.cl-row.r3 .cl-rank{color:#d99a66}
.cl-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-games{color:var(--dim);font-size:12px;white-space:nowrap}
.cl-pts{font-weight:800;font-size:16px;min-width:3.2ch;text-align:right}
.cl-pts small{color:var(--dim);font-weight:600;font-size:11px}
.cl-row.you{background:rgba(255,122,46,.12);border-radius:10px;border-bottom-color:transparent;padding-left:8px;padding-right:8px;margin:2px -4px}
.cl-row.you .cl-name::after{content:" (you)";color:var(--flame-orange);font-weight:600}
.cl-you{margin-top:4px}
.cl-you .cl-gap{color:var(--dim);text-align:center;font-size:12px;padding:2px 0}
.cl-cta{margin:-4px 0 16px;color:var(--dim);font-size:14px;line-height:1.5}
.cl-cta .cl-btn{margin-left:6px}
.cl-btn{display:inline-block;cursor:pointer;border:0;text-decoration:none;border-radius:999px;padding:9px 16px;font:800 14px/1 var(--font-body);color:#111;background:linear-gradient(135deg,#ffb347,#ff7a2e)}
.cl-btn.quiet{background:var(--surface);color:var(--white);border:1px solid var(--surface-line)}
.cl-remind p{color:var(--dim);margin:0 0 10px;line-height:1.5;font-size:14px}
.cl-remind label{display:flex;align-items:flex-start;gap:10px;margin:8px 0;font-size:14px;line-height:1.4;cursor:pointer}
.cl-remind label input{margin-top:3px;width:18px;height:18px;accent-color:#ff7a2e}
.cl-remind label small{display:block;color:var(--dim)}
.cl-remind .cl-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.cl-note{font-size:13px;color:var(--flame-orange)}
.cl-info{color:var(--dim);font-size:14px;line-height:1.55}
.cl-info li{margin:6px 0}
.cl-info a{color:var(--white)}
@media (max-width:640px){
  .cl-head h1{font-size:34px}
  .cl-row{grid-template-columns:30px 1fr auto;gap:8px}
  .cl-games{display:none}
}