.shared-lobby-background {
    position: fixed;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
    background: #02020a;
}

.shared-lobby-bg-video,
.shared-lobby-bg-image,
.shared-lobby-bg-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.shared-lobby-bg-video {
    object-fit: cover;
    object-position: center center;
    opacity: 1;
}

.shared-lobby-bg-image {
    opacity: 0;
    background: url("../lobby_achtergrond.png") center center / cover no-repeat;
}

.shared-lobby-bg-shade {
    background:
        linear-gradient(180deg, rgba(3, 6, 18, 0.16), rgba(4, 7, 22, 0.34)),
        radial-gradient(circle at 50% 48%, transparent 0 46%, rgba(0, 0, 0, 0.30) 100%);
}

html.lobby-bg-image-mode .shared-lobby-bg-video,
body.lobby-bg-image-mode .shared-lobby-bg-video {
    opacity: 0;
    visibility: hidden;
}

html.lobby-bg-image-mode .shared-lobby-bg-image,
body.lobby-bg-image-mode .shared-lobby-bg-image {
    opacity: 1;
}

body.page-uses-lobby-background {
    background: #02020a !important;
}

body.page-uses-lobby-background::before,
body.page-uses-lobby-background::after {
    display: none !important;
}

body.page-uses-lobby-background main {
    position: relative;
    z-index: 5;
}

body.page-uses-lobby-background canvas {
    z-index: 1;
}

body.page-uses-lobby-background .screen {
    background:
        linear-gradient(180deg, rgba(3, 6, 18, 0.34), rgba(4, 7, 22, 0.56)),
        radial-gradient(circle at 50% 44%, rgba(55, 247, 255, 0.08), transparent 46%) !important;
    backdrop-filter: blur(8px) saturate(125%);
}

body.page-uses-lobby-background #main-menu.screen.lobby-empty {
    background:
        linear-gradient(180deg, rgba(3, 6, 18, 0.12), rgba(4, 7, 22, 0.24)) !important;
    backdrop-filter: none !important;
}

body.page-uses-lobby-background #main-menu.screen.lobby-empty .lobby-bg-video {
    display: none !important;
}

body.game-running .shared-lobby-background,
body.intro-active .shared-lobby-background {
    opacity: 0;
    visibility: hidden;
}
