/* HAVEN 61F: period filter styling, desktop and mobile. */
.leaderboards-page .haven-period-selector-61f {
    display:flex; flex-wrap:wrap; gap:7px; align-items:center;
    padding:16px 24px 10px; background:rgba(8,12,15,.82);
}
.leaderboards-page .haven-period-button-61f {
    border:1px solid rgba(255,255,255,.16); border-radius:2px;
    background:rgba(255,255,255,.035); color:rgba(238,241,244,.78);
    font:inherit; font-size:.74rem; font-weight:800; letter-spacing:.055em;
    padding:10px 14px; cursor:pointer;
}
.leaderboards-page .haven-period-button-61f:hover,
.leaderboards-page .haven-period-button-61f:focus-visible {
    border-color:rgba(239,154,102,.9); color:#fff;
}
.leaderboards-page .haven-period-button-61f.is-active {
    color:#fff; border-color:#d16a2d; background:rgba(209,106,45,.24);
    box-shadow:inset 0 -3px 0 #eb945a;
}
.leaderboards-page .haven-period-button-61f:focus-visible {
    outline:2px solid #eb945a; outline-offset:2px;
}
.leaderboards-page .haven-period-help-61f {
    margin:0; padding:4px 24px 13px; font-size:.78rem;
    color:rgba(232,238,242,.62); background:rgba(8,12,15,.82);
}
.leaderboards-page .haven-period-empty-61f {
    padding:16px 24px; color:rgba(232,238,242,.76);
}
.leaderboards-page [hidden] { display:none !important; }
@media (max-width:640px) {
    .leaderboards-page .haven-period-selector-61f { padding:12px; gap:5px; }
    .leaderboards-page .haven-period-button-61f { font-size:.68rem; padding:9px 10px; }
    .leaderboards-page .haven-period-help-61f { padding:5px 12px 12px; }
}