.toolbar-actions { display: flex; gap: 8px; }
#leaderboard-button { min-height: 44px; padding: 8px 12px; border: 1px solid #373943; border-radius: 12px; background: #1b1d25; color: #c3c8d2; font: inherit; font-weight: 650; }
.leaderboard-tabs { display: flex; gap: 6px; margin: 2px 0 14px; }
.leaderboard-tabs button { flex: 1; min-height: 44px; padding: 7px 12px; border-color: #58414b; background: #251e25; font-size: 13px; font-weight: 650; }
.leaderboard-tabs button[aria-pressed="true"] { border-color: var(--accent-border); background: var(--accent-deep); color: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
#leaderboard-scroll { max-height: min(52dvh, 470px); overflow: auto; scrollbar-gutter: stable; }
#leaderboard-scroll.is-expanded { max-height: min(55dvh, 470px); }
#leaderboard-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.rank-column { width: 34px; }
.apples-column { width: 48px; }
.time-column { width: 86px; }
#leaderboard-table th { position: sticky; top: 0; z-index: 1; background: #201a21; font-size: 11px; color: #bbaab0; font-weight: 500; padding: 0 4px 8px; text-align: left; }
#leaderboard-table td { padding: 9px 4px; border-top: 1px solid #49313a; font-size: 12px; vertical-align: middle; }
#leaderboard-table th:nth-child(n+3), #leaderboard-table td:nth-child(n+3) { text-align: right; white-space: nowrap; }
#leaderboard-table td:first-child { color: #bbaab0; }
.leaderboard-name { overflow-wrap: anywhere; }
#leaderboard-table .is-current-player td { background: var(--accent-wash); color: #f3eeee; }
#leaderboard-table .is-current-player td:first-child { box-shadow: inset 2px 0 var(--accent-border); }
.leaderboard-empty { color: #bbaab0; line-height: 1.5; }
#personal-best { margin: 14px 0 0; font-size: 12px; line-height: 1.6; font-weight: 650; font-variant-numeric: tabular-nums; }
#leaderboard-more { justify-content: center; min-height: 44px; padding-top: 8px; margin-top: 6px; font-size: 12px; }
#leaderboard-message, #name-message, #name-cooldown { color: #c7b8c2; font-size: 11px; line-height: 1.5; }
#leaderboard-message { margin: 10px 0 0; }
#player-settings { padding: 12px 0 6px; border-bottom: 1px solid #49313a; }
#name-form label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.name-edit { display: flex; gap: 6px; }
.name-edit button { flex: 0 0 auto; white-space: nowrap; }
#display-name { width: 100%; min-width: 0; min-height: 44px; padding: 7px 10px; border: 1px solid #58414b; border-radius: 9px; background: #251e25; color: #eee4e9; font: inherit; font-size: 13px; }
#name-form button, .name-prompt-actions button { min-height: 44px; padding: 7px 12px; border-color: #58414b; background: #251e25; font-size: 12px; }
#display-name:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
#name-cooldown { margin: 7px 0 0; }
#name-message { margin: 6px 0 0; }
#name-prompt { border-bottom: 1px solid #49313a; padding-bottom: 10px; margin-bottom: 12px; }
#name-prompt-text { margin: 0; color: #c7b8c2; font-size: 12px; line-height: 1.5; }
.name-prompt-actions { display: flex; gap: 6px; margin-top: 6px; }
.name-prompt-actions button { min-height: 36px; }
@media (forced-colors: active) { #display-name, #name-form button, .leaderboard-tabs button, .panel-close { border: 2px solid ButtonText; } #leaderboard-table .is-current-player td { border-top: 2px solid Highlight; } }
