.draft-leaderboards { max-width: 64rem; margin: auto; padding: clamp(1rem, 2vw, 1.5rem) 0 4rem; }
.leaderboard-eyebrow { color: #d7b46a; font: 700 .72rem Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .7rem; }
.leaderboard-hero { max-width: 47rem; margin-bottom: 1.5rem; }
.leaderboard-hero h1 { font: 500 clamp(2.2rem, 4.6vw, 3.4rem)/1.05 Georgia, serif; letter-spacing: -.04em; margin-bottom: .75rem; }
.leaderboard-lede { color: var(--theme-muted, #ada99e); font-size: .95rem; line-height: 1.6; }
.leaderboard-hero > a { display: inline-block; margin-top: .25rem; font-weight: 700; }
.leaderboard-period-tabs { display: flex; gap: .5rem; border-bottom: 1px solid var(--theme-border, #303934); margin-bottom: 1.25rem; }
.leaderboard-period-tabs a { padding: .7rem 1.1rem; color: var(--theme-muted, #ada99e); border-bottom: 3px solid transparent; }
.leaderboard-period-tabs a[aria-current="page"] { border-color: #d7b46a; color: var(--theme-ink, #eee9dd); font-weight: 750; }
.leaderboard-period-tabs a:hover { color: #eee9dd; text-decoration: none; }
.leaderboard-period { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.leaderboard-period h2 { font: 500 clamp(1.5rem, 4vw, 2rem)/1.3 Georgia, serif; margin: 0 0 .5rem; }
.leaderboard-period p:last-child { font-size: .82rem; color: var(--theme-muted, #ada99e); margin: 0; }
.leaderboard-period-navigation { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .84rem; }
.leaderboard-date-form { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-bottom: .75rem; font-size: .8rem; }
.leaderboard-date-form label { color: var(--theme-muted, #ada99e); margin: 0; }
.leaderboard-date-form input, .leaderboard-date-form button { border: 1px solid var(--theme-border, #303934); background: var(--theme-surface, #151a18); color: var(--theme-ink, #eee9dd); border-radius: .3rem; padding: .45rem .6rem; }
.leaderboard-date-form button { cursor: pointer; font-weight: 650; }
.leaderboard-date-form button:hover { border-color: #d7b46a; }
.leaderboard-personal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.5rem; border: 1px solid #635239; border-radius: .7rem; background: #201e18; margin: 1.5rem 0; }
.leaderboard-personal.is-provisional { border-style: dashed; }
.leaderboard-personal-score { font: 500 2.6rem/1.2 Georgia, serif; margin: .5rem 0; font-variant-numeric: tabular-nums; }
.leaderboard-personal-score span { font: 400 .85rem system-ui, sans-serif; color: var(--theme-muted, #ada99e); }
.leaderboard-personal p:last-child { color: var(--theme-muted, #ada99e); font-size: .86rem; margin: 0; }
.leaderboard-personal > a { font-size: .86rem; white-space: nowrap; }
.leaderboard-invitation { color: var(--theme-muted, #ada99e); font-size: .87rem; line-height: 1.7; margin: 1.25rem 0; }
.leaderboard-table-wrap { border: 1px solid var(--theme-border, #303934); border-radius: .7rem; overflow-x: auto; }
.leaderboard-table { width: 100%; margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.leaderboard-table thead { color: var(--theme-muted, #ada99e); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; background: var(--theme-surface-alt, #1b211e); }
.leaderboard-table th, .leaderboard-table td { padding: 1.2rem; border-bottom: 1px solid var(--theme-border, #303934); }
.leaderboard-table th:first-child, .leaderboard-table td:first-child { padding-right: .4rem; }
.leaderboard-table tr:last-child th, .leaderboard-table tr:last-child td { border-bottom: 0; }
.leaderboard-table tbody th { font-weight: 650; overflow-wrap: anywhere; }
.leaderboard-table tbody th a { color: var(--theme-ink, #eee9dd); }
.leaderboard-table tbody th a:hover { color: #d7b46a; }
.leaderboard-table tbody th small { display: block; font-weight: 400; color: var(--theme-muted, #ada99e); font-size: .74rem; margin-top: .4rem; }
.leaderboard-table th:nth-child(n+3), .leaderboard-table td:nth-child(n+3) { text-align: right; white-space: nowrap; }
.leaderboard-rank { color: var(--theme-muted, #ada99e); font-size: .85rem; width: 4rem; }
.leaderboard-score { font-weight: 750; font-size: 1.1rem; }
.leaderboard-table .is-mirror { background: rgba(215, 180, 106, .07); }
.leaderboard-table .is-you { background: rgba(139, 200, 219, .07); }
.leaderboard-badge { display: inline-block; border: 1px solid #635239; color: #d7b46a; font-size: .62rem; line-height: 1.5; padding: .1rem .4rem; border-radius: .25rem; margin-left: .5rem; vertical-align: middle; white-space: nowrap; }
.leaderboard-empty { border: 1px dashed var(--theme-border, #303934); border-radius: .7rem; padding: 2rem; }
.leaderboard-empty h3 { font: 500 1.5rem Georgia, serif; }
.leaderboard-empty p { color: var(--theme-muted, #ada99e); line-height: 1.7; margin-bottom: 0; }
.leaderboard-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; margin: 1.5rem 0; font-size: .85rem; }
.leaderboard-pagination > span { color: var(--theme-muted, #ada99e); }
.leaderboard-rules { border-top: 1px solid var(--theme-border, #303934); padding-top: 1.5rem; margin-top: 2rem; color: var(--theme-muted, #ada99e); font-size: .86rem; line-height: 1.8; }
.leaderboard-rules summary { color: var(--theme-ink, #eee9dd); cursor: pointer; font-weight: 650; }
.leaderboard-rules ul { padding-left: 1.25rem; margin-top: 1rem; }
.leaderboard-rules li { padding-left: .2rem; margin-bottom: .5rem; }
.draft-leaderboards a:focus-visible, .leaderboard-rules summary:focus-visible { outline: 2px solid #d7b46a; outline-offset: 4px; }
.leaderboard-date-form input:focus-visible, .leaderboard-date-form button:focus-visible { outline: 2px solid #d7b46a; outline-offset: 3px; }
@media (max-width: 650px) {
    .leaderboard-period-tabs { flex-wrap: wrap; }
    .leaderboard-period-tabs a { padding-inline: .6rem; }
    .leaderboard-table th, .leaderboard-table td { padding: .9rem .65rem; }
    .leaderboard-table tbody th { min-width: 8rem; font-size: .85rem; }
    .leaderboard-badge { margin: .3rem 0 0; }
    .leaderboard-table thead { font-size: .6rem; letter-spacing: .02em; }
    .leaderboard-table th:nth-child(3) { white-space: normal; }
    .leaderboard-score { font-size: .95rem; }
    .leaderboard-rank { width: 2.25rem; }
}