/* Localization keeps controls readable when English labels are longer. */
html body #activitiesPage #activitiesList > .activity-list-card {
    border-radius: 20px !important;
    overflow: hidden !important;
    background: var(--rp-surface) !important;
    border: 0 !important;
    box-shadow: none !important;
}
#activitiesList .activity-cover-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background: var(--rp-surface-2);
}
html body #activitiesPage #activitiesList .activity-cover,
html body #activitiesPage #activitiesList .activity-list-card:hover .activity-cover {
    display: block;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    border-radius: 0 !important;
    animation: none !important;
}
html.theme-dark #activitiesList .activity-cover.is-placeholder { filter: invert(.88); }
html body #activitiesPage #activitiesList .photo-item-info {
    position: static !important;
    padding: 16px !important;
    background: transparent !important;
}
html body #activitiesPage #activitiesList .photo-item-title { color: var(--rp-text) !important; }
html body #activitiesPage #activitiesList .photo-item-meta { color: var(--rp-text-2) !important; }
html body .site-language-toggle {
    font: 600 15px/1 -apple-system, BlinkMacSystemFont, sans-serif;
}
html[lang="en"] #homePage .ranking-tabs {
    display: flex;
    width: min(100%, 620px);
}
html[lang="en"] #homePage .ranking-tabs button {
    flex: 1 1 0;
    padding-inline: 8px;
    white-space: normal;
    line-height: 1.3;
}
html[lang="en"] .hp-stat-label { overflow-wrap: normal !important; }

/* Live search: two separate frosted surfaces, with no submit button. */
html body #galleryPage .gallery-type-filters {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
}
html body #galleryPage .gallery-type-filters::before,
html body #galleryPage .gallery-type-filters::after {
    display: none !important;
}
html body #galleryPage .gallery-type-chip:not(.is-active) {
    background: var(--rp-surface-2) !important;
    opacity: 1;
}
html body #galleryPage .gallery-type-chip,
html body #galleryPage .gallery-type-chip:hover,
html body #galleryPage .gallery-type-chip:active {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body #galleryPage .gallery-type-chip::before,
html body #galleryPage .gallery-type-chip::after {
    display: none !important;
}
html body #galleryPage .gallery-type-chip.is-active,
html body #galleryPage .gallery-type-chip[aria-pressed="true"] {
    background: #007aff !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html body #galleryPage .gallery-search-trigger {
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--rp-text);
    box-shadow: none;
    backdrop-filter: none;
    cursor: pointer;
}
html body #galleryPage .gallery-search-trigger::before { display: none !important; }
html body #galleryPage .gallery-search-trigger:focus-visible { outline: 2px solid var(--rp-accent); }
html body #siteSearchModal {
    z-index: 2100;
    align-items: flex-start;
    padding: max(88px, 10vh) 20px 24px;
    background: rgba(0, 0, 0, .48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden;
}
html body #siteSearchModal .site-search-dialog {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(100%, 760px);
    max-width: 760px;
    max-height: calc(90dvh - 112px);
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible;
}
#siteSearchModal .site-search-input-surface,
#siteSearchModal .site-search-results {
    color: var(--rp-text);
    background: rgba(255,255,255,.60);
    border: 1px solid rgba(255,255,255,.42);
    backdrop-filter: blur(40px) saturate(125%);
    -webkit-backdrop-filter: blur(40px) saturate(125%);
    box-shadow: 0 16px 48px rgba(0,0,0,.15);
    border-radius: 24px;
}
html.theme-dark #siteSearchModal .site-search-input-surface,
html.theme-dark #siteSearchModal .site-search-results {
    background: rgba(30,30,33,.64);
    border-color: rgba(255,255,255,.16);
}
#siteSearchModal .site-search-input-surface {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 18px;
}
#siteSearchModal .site-search-input-surface > svg { flex-shrink: 0; width: 19px; height: 19px; }
html body #siteSearchInput {
    flex: 1;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 2px 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    color: var(--rp-text);
    font: inherit;
    font-size: 17px;
    line-height: 1.5;
}
#siteSearchInput::placeholder { color: var(--rp-text-2); }
html body #siteSearchModal #siteSearchInput,
html body #siteSearchModal #siteSearchInput:focus,
html body #siteSearchModal #siteSearchInput:focus-visible {
    -webkit-appearance: none;
    appearance: none;
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}
html body #siteSearchInput::-webkit-search-decoration,
html body #siteSearchInput::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}
#siteSearchModal .site-search-input-surface:focus-within {
    border-color: color-mix(in srgb, var(--rp-text) 24%, transparent);
}
#siteSearchModal .site-search-results {
    min-height: 100px;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
    scrollbar-width: thin;
}
#siteSearchResults section + section { margin-top: 24px; }
#siteSearchResults h3 { margin: 0 0 12px; font-size: 14px; color: var(--rp-text-2); font-weight: 600; }
#siteSearchResults .site-search-status { margin: 18px 0; color: var(--rp-text-2); font-size: 14px; text-align: center; }
.site-search-users { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.site-search-user { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; color: var(--rp-text); text-decoration: none; min-width: 0; }
.site-search-user img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.site-search-user > span { min-width: 0; }
.site-search-user strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-search-user small { display: block; margin-top: 2px; color: var(--rp-text-2); font-size: 12px; }
.site-search-photos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.site-search-photos a { position: relative; overflow: hidden; border-radius: 14px; color: #fff; background: var(--rp-surface-2); text-decoration: none; }
.site-search-photos img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.site-search-photos span { position: absolute; inset: auto 0 0; padding: 20px 10px 10px; font-size: 13px; background: linear-gradient(transparent,rgba(0,0,0,.7)); }
@media (max-width: 520px) {
    .site-search-users { grid-template-columns: minmax(0,1fr); }
    .site-search-photos { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-transparency: reduce) {
    #siteSearchModal .site-search-input-surface,
    #siteSearchModal .site-search-results { background: var(--rp-surface) !important; }
}

/* Persistent fixed modal shells allow both opening and closing transitions. */
html body .modal,
html body #announcementModal,
html body #announcementModal.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    animation: none !important;
    transition: opacity 200ms ease, visibility 0s linear 240ms !important;
}
html body .modal.active,
html body #announcementModal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 240ms ease, visibility 0s !important;
}
html body .modal .modal-content,
html body #announcementModal .announcement-modal-content,
html body #announcementModal.active .announcement-modal-content {
    animation: none !important;
    opacity: 0;
    transform: translateY(12px) scale(.985);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.22,1,.36,1) !important;
}
html body .modal.active .modal-content,
html body #announcementModal.active .announcement-modal-content {
    opacity: 1;
    transform: none;
    transition: opacity 240ms ease, transform 300ms cubic-bezier(.22,1,.36,1) !important;
}
html body #mainContent > .page,
html body #mainContent > .page.active,
html body #mainContent > .page.active.rp-page-enter {
    animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
    html body .modal,
    html body .modal .modal-content,
    html body #announcementModal,
    html body #announcementModal.active,
    html body #announcementModal .announcement-modal-content,
    html body #announcementModal.active .announcement-modal-content {
        transition: none !important;
    }
}

/* Announcement glass is scoped to this dialog, not other modals. */
html body #announcementModal {
    z-index: 2000;
    background: rgba(0, 0, 0, .48) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 24px;
    overscroll-behavior: contain;
}
html body #announcementModal .announcement-modal-content {
    display: flex;
    flex-direction: column;
    width: min(100%, 560px);
    max-height: min(80dvh, 720px);
    padding: clamp(20px, 4vw, 30px);
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, .52) !important;
    background: rgba(255, 255, 255, .70) !important;
    -webkit-backdrop-filter: blur(48px) saturate(120%) !important;
    backdrop-filter: blur(48px) saturate(120%) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
    color: var(--rp-text);
    overflow: hidden;
}
html.theme-dark body #announcementModal .announcement-modal-content {
    background: rgba(30, 30, 33, .74) !important;
    border-color: rgba(255, 255, 255, .19) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}
html body #announcementModal .announcement-modal-content::before { display: none !important; }
html body #announcementModal .announcement-modal-header {
    margin: 0 0 20px;
    padding: 0 !important;
    align-items: center;
    border: 0 !important;
}
html body #announcementModal .announcement-modal-title {
    color: var(--rp-text) !important;
    font-size: 24px;
    font-weight: 650;
    gap: 10px;
}
html body #announcementModal .announcement-modal-icon {
    width: 28px;
    height: 28px;
    color: var(--rp-text);
    background: none !important;
    box-shadow: none !important;
    animation: none !important;
}
html body #announcementModal .announcement-modal-body {
    min-height: 0;
    padding: 0 4px 0 0;
    color: var(--rp-text) !important;
    font-size: 15px;
    line-height: 1.85;
    scrollbar-width: thin;
    animation: none !important;
}
html body #announcementModal .announcement-modal-actions {
    margin-top: 22px;
    padding: 0;
    border: 0 !important;
    animation: none !important;
}
html body #announcementModal .announcement-modal-ok {
    width: 100%;
    min-height: 46px;
    border-radius: 999px;
    border: 1px solid var(--rp-line-strong) !important;
    background: color-mix(in srgb, var(--rp-surface) 50%, transparent) !important;
    color: var(--rp-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
html body #announcementModal .close-btn {
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rp-text) 8%, transparent) !important;
    color: var(--rp-text-2) !important;
    box-shadow: none !important;
}
html body #announcementModal button::before { display: none !important; }
@keyframes rp-announcement-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes rp-announcement-enter {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html body #announcementModal.active,
    html body #announcementModal.active .announcement-modal-content { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
    html body #announcementModal .announcement-modal-content {
        background: var(--rp-surface) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* Rankings retain mounted panels: no empty frame or height collapse on tab change. */
#homePage .ranking-tabs {
    position: relative;
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    padding: 4px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: var(--rp-surface-2);
    box-sizing: border-box;
    isolation: isolate;
}
#homePage .ranking-tabs button {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 40px;
    padding: 9px clamp(10px, 2vw, 20px);
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    color: var(--rp-text-2);
    font: inherit;
    font-size: clamp(12px, 1.6vw, 14px);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color 220ms ease;
}
#homePage .ranking-tabs button::before,
#homePage .ranking-tabs button::after { display: none; }
#homePage .ranking-tabs button[aria-selected="true"] { color: var(--rp-text); }
#homePage .ranking-tabs button:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 2px; }
#homePage .ranking-tab-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    border-radius: 999px;
    background: var(--rp-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .09);
    pointer-events: none;
}
#homePage .is-ranking-ready .ranking-tab-indicator {
    transition: transform 320ms cubic-bezier(.22, 1, .36, 1), width 320ms cubic-bezier(.22, 1, .36, 1);
}
#homePage .leaderboard-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    border: 0 !important;
    border-radius: 24px !important;
    overflow: hidden;
    background: transparent !important;
    isolation: isolate;
}
#homePage .leaderboard-grid > .leaderboard-card {
    grid-area: 1 / 1;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
    transform: none !important;
    transition: none !important;
}
#homePage .leaderboard-grid > .is-ranking-active {
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
    transition: opacity 260ms ease, visibility 0s !important;
}
#homePage .leaderboard-card-head { display: none !important; }
#homePage .leaderboard-list { gap: 8px; }
#homePage .leaderboard-list > .loading { min-height: 680px; }
#homePage .leaderboard-item {
    min-height: 64px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--rp-surface) !important;
    transform: none !important;
    transition: background-color 180ms ease !important;
}
#homePage .leaderboard-item:hover { background: var(--rp-surface-2) !important; }
html body #homePage .leaderboard-item,
html body #homePage .leaderboard-item:hover {
    padding: 10px 12px !important;
    border-radius: 14px !important;
    transform: none !important;
    translate: none !important;
}
#homePage .leaderboard-avatar { border-radius: 50% !important; }
/* Remove legacy blue glass layers, including the gaps and hover state. */
html.theme-dark body #homePage .leaderboard-grid,
html.theme-dark body #homePage .leaderboard-card,
html.theme-dark body #homePage .leaderboard-list,
html.theme-dark body #homePage .leaderboard-info,
html.theme-dark body #homePage .leaderboard-username,
html.theme-dark body #homePage .leaderboard-count {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.theme-dark body #homePage .leaderboard-item {
    background: var(--rp-surface) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.theme-dark body #homePage .leaderboard-item:hover {
    background: var(--rp-surface-2) !important;
}
html body #homePage .leaderboard-item::before,
html body #homePage .leaderboard-item::after {
    display: none !important;
}
html body #homePage .leaderboard-username {
    color: var(--rp-text) !important;
    -webkit-text-fill-color: currentColor;
}
html body #homePage .leaderboard-count {
    color: var(--rp-text-2) !important;
    font-weight: 500;
}
html body #homePage .leaderboard-rank {
    color: var(--rp-text-2) !important;
    background: var(--rp-surface-2) !important;
    border: 0 !important;
    border-radius: 10px;
    box-shadow: none !important;
}
html body #homePage .leaderboard-rank.gold {
    color: #493000 !important;
    background: #e6b932 !important;
}
html body #homePage .leaderboard-rank.silver {
    color: #27313e !important;
    background: #afb9c7 !important;
}
html body #homePage .leaderboard-rank.bronze {
    color: #3f1e0b !important;
    background: #cc8a57 !important;
}
html.theme-dark body #homePage .leaderboard-rank.gold {
    color: #493000 !important;
    background: #e6b932 !important;
}
html.theme-dark body #homePage .leaderboard-rank.silver {
    color: #27313e !important;
    background: #afb9c7 !important;
}
html.theme-dark body #homePage .leaderboard-rank.bronze {
    color: #3f1e0b !important;
    background: #cc8a57 !important;
}

/* Statistics: explicit flow layout replaces conflicting legacy card/flex rules. */
html body #homePage .hp-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(8px, 2vw, 20px) !important;
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    margin: 0;
    border: 0 !important;
    background: transparent !important;
}
html body #homePage .hp-stat {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    grid-column: auto !important;
    gap: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 136px !important;
    padding: clamp(12px, 2.5vw, 24px) !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: var(--rp-surface) !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden;
}
html body #homePage .hp-stat::before,
html body #homePage .hp-stat::after { display: none !important; }
html body #homePage .hp-stat-num {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--rp-text) !important;
    -webkit-text-fill-color: var(--rp-text) !important;
    background: none !important;
    font-size: clamp(24px, 3.8vw, 44px) !important;
    font-weight: 650 !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.15 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap;
    opacity: 1 !important;
    transform: none !important;
    text-shadow: none !important;
}
html body #homePage .hp-stat-label {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    color: var(--rp-text-2) !important;
    font-size: clamp(12px, 1.8vw, 14px) !important;
    line-height: 1.5 !important;
    white-space: normal;
    overflow-wrap: anywhere;
}
@media (max-width: 380px) {
    html body #homePage .hp-stats { grid-template-columns: 1fr !important; }
    html body #homePage .hp-stat { min-height: 112px !important; }
}
@media (prefers-reduced-motion: reduce) {
    #homePage .ranking-tab-indicator,
    #homePage .leaderboard-grid > .leaderboard-card { transition: none !important; }
}

/* Home section headings share the left edge of their content. */
/* Crossfade snapshots without changing scrollbars, geometry, or scroll position. */
html.rp-theme-crossfade *,
html.rp-theme-crossfade *::before,
html.rp-theme-crossfade *::after {
    transition: none !important;
    animation-play-state: paused !important;
}
html.rp-theme-crossfade::view-transition-group(root) {
    animation: none !important;
}
html.rp-theme-crossfade::view-transition-old(root) {
    animation: rp-theme-fade-out 300ms ease-in-out both !important;
    mix-blend-mode: normal;
    clip-path: none !important;
    z-index: 2;
}
html.rp-theme-crossfade::view-transition-new(root) {
    animation: none !important;
    mix-blend-mode: normal;
    clip-path: none !important;
    z-index: 1;
}
@keyframes rp-theme-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
html.rp-theme-color-fallback,
html.rp-theme-color-fallback body,
html.rp-theme-color-fallback body * {
    transition-property: color, background-color, border-color, box-shadow, fill, stroke !important;
    transition-duration: 300ms !important;
    transition-timing-function: ease-in-out !important;
}
@media (prefers-reduced-motion: reduce) {
    html.rp-theme-crossfade::view-transition-old(root) {
        animation: none !important;
    }
}
html body .site-top-bar-spacer {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}
html body .site-top-bar-announcement {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    margin: 0 8px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rp-text-2);
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
}
html body .site-top-bar {
    gap: 0 !important;
    padding-inline: 6px !important;
}
html body .site-top-bar-brand {
    padding-inline: 0;
}
html body .site-top-bar-actions {
    gap: 0;
}
html body .site-top-bar-actions .site-top-bar-btn {
    min-width: 36px !important;
    width: 36px;
    padding-inline: 0 !important;
}
html body .site-top-bar-announcement:has(.header-announcement-scroll) {
    justify-content: flex-start;
    text-align: left;
}
html body .site-top-bar-announcement .header-announcement-scroll {
    padding-left: 0;
    animation: preview-announcement-scroll var(--announcement-duration, 60s) linear var(--announcement-delay, 0s) infinite;
}
@keyframes preview-announcement-scroll {
    from { transform: translateX(var(--announcement-start, 0px)); }
    to { transform: translateX(var(--announcement-end, -100%)); }
}
html body .site-top-bar-announcement:hover .header-announcement-scroll {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    html body .site-top-bar-announcement .header-announcement-scroll {
        animation: none;
        transform: none;
    }
}
html body .site-top-bar-actions .site-top-bar-btn,
html body .site-top-bar-actions .site-top-bar-btn:hover,
html body .site-top-bar-actions .site-top-bar-btn:active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body .site-top-bar-actions .site-top-bar-btn::before,
html body .site-top-bar-actions .site-top-bar-btn::after {
    display: none !important;
}
#homePage .hp-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}
#homePage .hp-section-title {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

/* Keep hover feedback stationary; preserve positioning transforms where needed. */
html body :is(button, [role="button"], a[class*="btn"]):hover {
    transform: var(--button-rest-transform, none) !important;
    translate: none !important;
    scale: none !important;
}
.carousel-btn,
.gallery-search-clear {
    --button-rest-transform: translateY(-50%);
}

/* Original compact dock: shrink to its contents instead of filling the viewport. */
html body nav.bottom-nav {
    width: max-content !important;
    max-width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px !important;
    gap: 4px !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
}
html body nav.bottom-nav > .nav-item {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 60px !important;
    min-height: 40px !important;
    height: auto !important;
    padding: 8px 16px !important;
    box-sizing: border-box;
    justify-content: center;
    white-space: nowrap;
}
html body nav.bottom-nav > .bottom-nav-slider {
    top: 6px;
    bottom: 6px;
    transition:
        left 360ms cubic-bezier(.22, 1, .36, 1),
        width 360ms cubic-bezier(.22, 1, .36, 1),
        opacity 180ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
    html body nav.bottom-nav > .bottom-nav-slider {
        transition: none !important;
    }
}

#homePage :is(.hot-section, .featured-section, .latest-works-section, .leaderboard-section, .stats-section) {
    border-top: 0 !important;
}
#homePage .hot-frame .hot-frame-media {
    aspect-ratio: 4 / 3 !important;
}
#homePage .hot-frames {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#homePage .hot-frames > .hot-frame:first-child {
    grid-column: 1 / -1;
}
#homePage .hot-frames > .hot-frame:first-child .hot-frame-media {
    aspect-ratio: 16 / 9 !important;
}
#homePage .hot-frame-caption {
    display: block !important;
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    padding: 30px 14px 12px !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, .65)) !important;
    text-align: left;
    pointer-events: none;
}
#homePage .hot-frame-title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
html body #homePage .hot-frame-caption,
html body #homePage .home-latest-card-caption {
    inset: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    background: radial-gradient(ellipse 120% 85% at 0% 100%, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .61) 18%, rgba(0, 0, 0, .39) 36%, rgba(0, 0, 0, .18) 53%, rgba(0, 0, 0, .05) 68%, rgba(0, 0, 0, 0) 82%) !important;
}
html body #homePage .hot-frame-caption {
    padding-bottom: 8px !important;
}
#homePage .hot-frame-user,
#homePage .hot-frame-reason {
    display: none !important;
}
html body #homePage .featured-carousel .carousel-btn {
    top: 10px;
    right: auto;
    width: 40px;
    height: 40px;
    transform: none !important;
    --button-rest-transform: none;
    background: transparent !important;
    color: #fff !important;
    border: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
html body #homePage .featured-carousel .carousel-btn:hover {
    background: transparent !important;
}
html body #homePage .featured-carousel .carousel-btn.prev {
    left: 10px;
}
html body #homePage .featured-carousel .carousel-btn.next {
    left: 50px;
    right: auto;
}
html body #homePage .featured-carousel .carousel-btn::before,
html body #homePage .featured-carousel .carousel-btn::after {
    display: none !important;
}
html body #homePage .featured-carousel .carousel-btn svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

/* Clip the complete latest-work image, including its bottom corners. */
#homePage .home-latest-card {
    position: relative;
    border-radius: var(--rp-radius) !important;
    overflow: hidden !important;
}
#homePage .home-latest-card-media {
    border-radius: inherit !important;
}
#homePage .home-latest-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
#homePage .home-latest-card-caption,
#homePage .featured-photo-caption {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: 28px 14px 12px !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, .65)) !important;
    pointer-events: none;
    text-align: left;
}
#homePage .home-latest-card-title,
#homePage .featured-photo-title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
#homePage .featured-stage {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body #homePage .featured-carousel {
    width: 100%;
    height: auto !important;
    aspect-ratio: 4 / 3;
}
html body #homePage .featured-carousel .carousel-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
#homePage .featured-photo-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

:is(#homePage, #galleryPage) .home-photo-hot-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    background: rgba(20, 20, 20, .48);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: none;
}
:is(#homePage, #galleryPage) .home-photo-hot-badge svg {
    width: 18px;
    height: 18px;
}

html body #galleryPage #galleryGrid > .photo-item {
    position: relative;
    aspect-ratio: 4 / 3;
    min-height: 0;
    border-radius: var(--rp-radius) !important;
    overflow: hidden !important;
}
html body #galleryPage #galleryGrid > .photo-item > img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    object-fit: cover;
    display: block;
}
html body #galleryPage #galleryGrid .photo-item-info {
    position: absolute !important;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 28px 14px 12px !important;
    background: radial-gradient(ellipse 120% 85% at 0% 100%, rgba(0,0,0,.78), rgba(0,0,0,.39) 36%, rgba(0,0,0,.05) 68%, transparent 82%) !important;
    pointer-events: none;
}
html body #galleryPage #galleryGrid .photo-item-title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
html body .site-account-button {
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;
    width:36px;height:36px;min-width:36px;margin:0 6px 0 0;padding:3px;
    border:0;border-radius:50%;background:transparent;box-shadow:none;
    color:var(--rp-text);cursor:pointer;transform:none!important;
}
html body .site-account-button img{display:block;width:30px;height:30px;border-radius:50%;object-fit:cover;}
html body .site-account-button::before,html body .site-account-button::after{display:none!important;}
html body .site-account-menu{
    position:fixed;z-index:500;width:180px;max-width:calc(100vw - 16px);padding:6px;
    border:1px solid rgba(128,128,128,.18);border-radius:18px;
    background:rgba(255,255,255,.9);color:#202124;
    backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
    box-shadow:0 10px 35px rgba(0,0,0,.13);transform-origin:top left;
}
html body .site-account-menu[hidden]{display:none!important;}
html body .site-account-menu .site-account-menu-item{
    display:flex;align-items:center;width:100%;min-height:42px;box-sizing:border-box;
    padding:10px 13px;margin:0;border:0;border-radius:12px;
    background:transparent;color:inherit;text-decoration:none;text-align:left;
    font:inherit;font-size:14px;line-height:1.4;cursor:pointer;
    box-shadow:none;transform:none!important;transition:background-color 130ms ease;
}
html body .site-account-menu .site-account-menu-item::before,html body .site-account-menu .site-account-menu-item::after{display:none!important;}
html body .site-account-menu .site-account-menu-item:hover,html body .site-account-menu .site-account-menu-item:focus-visible{background:rgba(128,128,128,.16);box-shadow:none;outline:none;}
html body .site-account-button:focus-visible{outline:2px solid #007aff;outline-offset:2px;}
html.theme-dark body .site-account-menu{background:rgba(36,36,38,.93);color:#f5f5f7;border-color:rgba(255,255,255,.12);}
html.theme-dark body .site-account-menu .site-account-menu-item:hover,html.theme-dark body .site-account-menu .site-account-menu-item:focus-visible{background:rgba(255,255,255,.13);}