.logo {
    font-family: 'Torus', sans-serif;
    font-weight: 600;
    font-size: 20px;
    display: flex;
    gap: 0px;
    flex-shrink: 0;
    white-space: nowrap;
}

.logo .white {
    color: white;
}

.logo .color {
    color: var(--c-accent-65);
}

#sidebar {
    top: 8px;
    margin: 8px;
    margin-right: 0px;
    height: calc(100dvh - 16px);
    width: 300px;
    overflow: hidden;
    user-select: none;
    position: sticky;
    flex-shrink: 0;
    background: var(--c-base-15);
    border-radius: 16px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

#sidebar .top {
    padding: 24px 16px;
}

#sidebar .logo {
    font-size: 24px;
    margin-top: -5px;
}

#sidebar .logo.short {
    display: none;
}

#sidebar .item {
    height: 42px;
    padding: 0px 12px 0px 8px;
    gap: 8px;
    justify-content: flex-start;
    font-size: 16px;
    --btnBg: transparent;
    --btnBgHover: var(--c-base-25);
    --btnFg: var(--c-base-60);
    --btnFgHover: var(--c-base-100);
}

#sidebar .item.active {
    --btnBg: var(--c-base-25);
    --btnBgHover: var(--c-base-35);
    --btnFg: var(--c-base-100);
    --btnFgHover: var(--c-base-100);
}

#sidebar .item::before {
    content: '';
    display: block;
    width: 4px;
    height: 12px;
    border-radius: 4px;
    background: transparent;
    flex-shrink: 0;
    transition: 0.1s ease-in-out;
}

#sidebar .item.page.active::before {
    height: 16px;
    background: var(--c-accent-60);
}

#sidebar .item:not(.page)::before {
    background: transparent;
}

#sidebar .item .label {
    flex-grow: 1;
    text-align: left;
}

#sidebar .item .icon:last-child {
    font-size: 20px;
}

#sidebar .bottom {
    padding: 8px;
    padding-top: 0px;
}

#sidebar .scroll {
    overflow-y: auto;
    padding: 0px 8px;
}

#sidebar .separator {
    margin: 8px auto;
    height: 1px;
    width: 50%;
    background: var(--c-base-30);
    flex-shrink: 0;
}

#sidebar .item .icon {
    font-variation-settings: 'FILL' 1;
    font-size: 24px;
    width: 32px;
    display: flex;
    justify-content: center;
}

#sidebar .item img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

#topbar {
    position: sticky;
    top: 8px;
    padding: 8px 12px;
    width: 100%;
    overflow: hidden;
    user-select: none;
    min-height: 50px;
    z-index: 2;
    background: var(--c-base-20);
    border-radius: 16px;
    transition: background 0.1s ease-in-out;
    box-shadow:
        0px 2px 4px rgba(0, 0, 0, 0.2), 0px -16px 0px var(--c-base-10);
}

#topbar:not(.scrolled) {
    background: var(--c-base-10);
    box-shadow: none;
}

#topbar .separator {
    height: 24px;
    width: 1px;
    background: var(--c-base-40);
    flex-shrink: 0;
}

#topbar .logo {
    margin-top: -3px;
}

#topbar .logo,
#topbar .pageSep {
    display: none;
}

#topbar .page {
    color: white;
}

#topbar .page .icon {
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'FILL' 1;
    font-size: 24px;
}

#topbar .page .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0px;
}

#btnOpenSidebar,
#btnCloseSidebar {
    display: none;
}

@media (max-width: 1300px) and (min-width: 800px) {
    body {
        --sidebarClosedWidth: 86px;
    }

    #sidebar .logo.full {
        display: none;
    }

    #sidebar .logo.short {
        display: flex;
    }

    @media (hover: hover) {
        #content {
            margin-left: calc(8px + var(--sidebarClosedWidth));
        }

        /* Position sidebar fixed so it expands on top of the content without pushing it */
        #sidebar {
            position: fixed;
            top: 0px;
            left: 0px;
            height: calc(100% - 16px);
            transition: 0.1s ease-in-out;
        }

        /* Apply styles when sidebar isn't hovered, letting us repeat as little as possible from above */
        #sidebar:not(:hover) {
            width: var(--sidebarClosedWidth);
        }

        #sidebar:hover .logo.full {
            display: flex;
        }

        #sidebar:hover .logo.short {
            display: none;
        }

        #sidebar .btn .label,
        #sidebar .btn .icon:last-child {
            transition: 0.1s ease-in-out;
        }

        #sidebar:not(:hover) .btn .label {
            visibility: hidden;
            opacity: 0;
        }

        #sidebar:not(:hover) .btn .icon:last-child {
            visibility: hidden;
            opacity: 0;
        }
    }

    @media (hover: none) {
        #sidebar {
            width: var(--sidebarClosedWidth);
        }
    }
}

@media (max-width: 800px) {

    #btnOpenSidebar,
    #btnCloseSidebar {
        display: flex;
    }

    #sidebar .logo {
        flex-grow: 1;
    }

    #sidebar {
        position: fixed;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        margin: 0px;
        box-shadow: none;
        border-radius: 0px;
    }

    #sidebar:not(.open) {
        display: none;
    }

    #topbar .logo,
    #topbar .pageSep,
    #topbar #openMenu {
        display: flex;
    }
}

#content {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px;
}

main {
    position: relative;
    width: 1250px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    animation: fadeInUp 0.3s ease forwards;
    flex-grow: 1;
    container-type: inline-size;
}

#footer {
    padding: 16px;
}

#footer * {
    color: var(--c-base-40);
    font-size: 13px;
    text-align: center;
}

#footer a {
    color: var(--c-base-50);
    text-decoration: underline;
}

#bgCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

img {
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

img.noFade {
    opacity: 1;
    transition: none;
}

img.loaded {
    opacity: 1;
}

.empty {
    font-size: 16px;
    color: var(--c-base-65);
}

.beatmapsetDetails {
    max-width: 100%;
    width: 800px;
}

.beatmapsetDetails .top .dimming {
    background: var(--c-base-30-70);
}

.beatmapsetDetails .top .content {
    padding: 24px 16px;
    position: relative;
    line-height: 1.2;
    color: white;
}

.beatmapsetDetails .top .content .text {
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
}

.beatmapsetDetails .top .artist {
    font-size: 20px;
    font-weight: 600;
}

.beatmapsetDetails .top .title {
    font-size: 32px;
    font-weight: 600;
}

.beatmapsetDetails .top .details {
    font-size: 16px;
    color: var(--c-base-90);
    font-weight: 600;
}

.beatmapsetDetails .top .details {
    font-size: 16px;
    color: var(--c-base-90);
    font-weight: 600;
}

.beatmapsetDetails .maps .map {
    --btnBg: transparent;
    --btnBgHover: var(--c-base-25);
    justify-content: flex-start;
    align-items: flex-start;
    padding: 4px 8px;
}

.beatmapsetDetails .maps .map.expanded {
    --btnBg: var(--c-base-25);
    --btnBgHover: var(--c-base-30);
}

.beatmapsetDetails .maps .map>.icon {
    margin-top: 4px;
}

.beatmapsetDetails .maps .map>.icon::after {
    content: 'keyboard_arrow_down'
}

.beatmapsetDetails .maps .map.expanded>.icon::after {
    content: 'keyboard_arrow_up'
}

.beatmapsetDetails .maps .map .ruleset {
    width: 24px;
    border-radius: 50%;
    background: var(--color-bg);
}

.beatmapsetDetails .maps .map .beatmapStars {
    background: var(--color-bg);
    color: var(--color-fg);
    margin-top: 1px;
}

.beatmapsetDetails .maps .map .content {
    margin-top: 3px;
}

.beatmapsetDetails .maps .map .version {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
}

.beatmapsetDetails .maps .map:not(.expanded) .details {
    display: none;
}

.beatmapsetDetails .maps .map .details .iconStats {
    gap: 4px 16px;
}

.beatmapsetDetails .maps .map .details .iconStats .stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 24px;
}

.beatmapsetDetails .maps .map .details .iconStats .stat .icon {
    color: var(--color-text);
    font-size: 24px;
}

.beatmapsetDetails .maps .map .details .iconStats .stat .label {
    color: var(--color-text);
    font-size: 14px;
    font-weight: bold;
}

.beatmapsetDetails .maps .map .details .iconStats .stat .value {
    color: white;
    font-size: 16px;
    font-weight: 600;
}

[data-is-electron="true"] .hiddenOnDesktop {
    display: none;
}