@media (max-width: 600px) {
    html,
    body {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body #app,
    html body #app:has(> #landing:not(.hidden)) {
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html body #app > #landing.landing:not(.hidden),
    html body #app:has(> #landing:not(.hidden)) > #landing.landing:not(.hidden),
    html body.discordActivity #app > #landing.landing:not(.hidden) {
        position: relative !important;
        inset: auto !important;
        width: min(100%, 430px) !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding:
            max(5px, env(safe-area-inset-top, 0px))
            8px
            max(18px, env(safe-area-inset-bottom, 0px)) !important;
        transform: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body #landing .homeTitleSplit.dstyTitleWrap,
    html body #landing .dstyTitleWrap,
    html body.discordActivity #landing .dstyTitleWrap {
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        margin: 0 0 2px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        transform: none !important;
    }

    html body #landing .homeDstyLogo,
    html body #landing .letterFillTitle,
    html body.discordActivity #landing .homeDstyLogo {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        min-height: 0 !important;
        max-height: 52px !important;
        font-size: clamp(25px, 7.7vw, 32px) !important;
        line-height: .82 !important;
        transform: none !important;
    }

    html body #landing .letterFillTitle .fillWord {
        line-height: .84 !important;
    }

    html body #landing .joinBasics,
    html body.discordActivity #landing .joinBasics {
        display: block !important;
        width: 100% !important;
        margin: 1px 0 2px !important;
    }

    html body #landing .joinBasics label,
    html body.discordActivity #landing .joinBasics label {
        font-size: 8px !important;
        line-height: 1 !important;
    }

    html body #landing #name,
    html body.discordActivity #landing #name {
        width: 100% !important;
        height: 27px !important;
        min-height: 27px !important;
        margin-top: 2px !important;
        padding: 3px 9px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }

    html body #landing .homeProfileTools,
    html body.discordActivity #landing .homeProfileTools {
        width: 100% !important;
        margin: 2px 0 !important;
    }

    html body #landing .avatarUploadLabel,
    html body.discordActivity #landing .avatarUploadLabel {
        font-size: 8px !important;
        line-height: 1 !important;
    }

    html body #landing .avatarUploadRow,
    html body.discordActivity #landing .avatarUploadRow {
        width: 100% !important;
        height: 39px !important;
        min-height: 39px !important;
        margin-top: 2px !important;
        padding: 3px 5px !important;
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 5px !important;
        border-radius: 12px !important;
    }

    html body #landing .homeAvatarPreview,
    html body.discordActivity #landing .homeAvatarPreview {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        font-size: 17px !important;
    }

    html body #landing .avatarUploadActions,
    html body.discordActivity #landing .avatarUploadActions {
        width: 100% !important;
        gap: 4px !important;
    }

    html body #landing .avatarUploadActions button,
    html body #landing #avatarUploadBtn,
    html body #landing #avatarClearBtn {
        height: 25px !important;
        min-height: 25px !important;
        padding: 2px 7px !important;
        border-radius: 999px !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }

    html body #landing .characters,
    html body.discordActivity #landing .characters {
        margin: 2px 0 0 !important;
        gap: 2px !important;
    }

    html body #landing .characterTitle,
    html body.discordActivity #landing .characterTitle {
        margin: 0 0 2px !important;
        font-size: 8px !important;
        line-height: 1 !important;
    }

    html body #landing .characterGrid,
    html body.discordActivity #landing .characterGrid {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }

    html body #landing .characterGrid .char,
    html body #landing .char,
    html body.discordActivity #landing .char {
        width: 100% !important;
        height: 36px !important;
        min-width: 0 !important;
        min-height: 36px !important;
        padding: 1px !important;
        border-radius: 10px !important;
        display: grid !important;
        grid-template-rows: 1fr auto !important;
        place-items: center !important;
    }

    html body #landing .char span {
        font-size: 15px !important;
        line-height: 1 !important;
    }

    html body #landing .char small {
        font-size: 5.5px !important;
        line-height: 1 !important;
    }

    html body #landing .teamChooseTitle,
    html body.discordActivity #landing .teamChooseTitle {
        width: 100% !important;
        height: 37px !important;
        min-height: 37px !important;
        margin: 4px 0 !important;
        padding: 0 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-width: 2px !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        letter-spacing: .03em !important;
        text-align: center !important;
    }

    html body #landing .teamChooseTitle::before,
    html body.discordActivity #landing .teamChooseTitle::before {
        left: 22% !important;
        border-top-width: 10px !important;
        border-bottom-width: 10px !important;
        border-right-width: 14px !important;
    }

    html body #landing .teamChooseTitle::after,
    html body.discordActivity #landing .teamChooseTitle::after {
        left: 78% !important;
        border-top-width: 10px !important;
        border-bottom-width: 10px !important;
        border-left-width: 14px !important;
    }

    html body #landing #discordLobby,
    html body.discordActivity #landing #discordLobby {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    html body #landing .discordRoleGrid,
    html body.discordActivity #landing .discordRoleGrid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) !important;
        grid-template-areas:
            "gold spec black"
            "controls controls controls" !important;
        align-items: stretch !important;
        gap: 5px !important;
        overflow: visible !important;
    }

    html body #landing .discordGoldCard {
        grid-area: gold !important;
    }

    html body #landing .discordBlackCard {
        grid-area: black !important;
    }

    html body #landing .discordCenterColumn,
    html body.discordActivity #landing .discordCenterColumn {
        display: contents !important;
    }

    html body #landing .discordTeamCard,
    html body.discordActivity #landing .discordTeamCard {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 6px 5px !important;
        display: flex !important;
        flex-direction: column !important;
        align-self: start !important;
        gap: 5px !important;
        border-radius: 13px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body #landing .discordTeamCard h2,
    html body.discordActivity #landing .discordTeamCard h2 {
        flex: 0 0 auto !important;
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    html body #landing .discordRoleBox,
    html body.discordActivity #landing .discordRoleBox {
        width: 100% !important;
        height: auto !important;
        min-height: 69px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 5px 3px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        border-radius: 9px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body #landing .discordRoleBox > div:first-child,
    html body.discordActivity #landing .discordRoleBox > div:first-child {
        order: 1 !important;
        width: 100% !important;
        text-align: center !important;
    }

    html body #landing .discordRoleBox b,
    html body.discordActivity #landing .discordRoleBox b {
        font-size: 7.5px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    html body #landing .discordRoleBox small,
    html body.discordActivity #landing .discordRoleBox small,
    html body #landing .discordSeatEmpty,
    html body.discordActivity #landing .discordSeatEmpty {
        display: none !important;
    }

    html body #landing .discordRoleBox .discordSeatList,
    html body.discordActivity #landing .discordRoleBox .discordSeatList {
        order: 2 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: start !important;
        justify-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        overflow: visible !important;
    }

    html body #landing .discordRoleBox .discordSeatList:empty,
    html body.discordActivity #landing .discordRoleBox .discordSeatList:empty {
        display: none !important;
    }

    html body #landing .discordRoleBox:has(> .discordRoleJoin[data-role="spymaster"]) .discordSeatList,
    html body.discordActivity #landing .discordRoleBox:has(> .discordRoleJoin[data-role="spymaster"]) .discordSeatList {
        grid-template-columns: minmax(0, 48px) !important;
    }

    html body #landing .discordSeatMini,
    html body #landing .discordSeatMini.discordSeatLarge,
    html body.discordActivity #landing .discordSeatMini,
    html body.discordActivity #landing .discordSeatMini.discordSeatLarge {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 48px !important;
        height: auto !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    html body #landing .discordSeatMini .avatar,
    html body #landing .discordSeatMini .lobbyAvatar,
    html body #landing .discordSeatMini.discordSeatLarge .avatar,
    html body #landing .discordSeatMini.discordSeatLarge .lobbyAvatar,
    html body.discordActivity #landing .discordSeatMini .avatar,
    html body.discordActivity #landing .discordSeatMini .lobbyAvatar {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex: 0 0 34px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 50% !important;
        font-size: 20px !important;
        line-height: 1 !important;
        overflow: visible !important;
    }

    html body #landing .discordSeatMini .avatar img,
    html body #landing .discordSeatMini .lobbyAvatar img,
    html body.discordActivity #landing .discordSeatMini .avatar img,
    html body.discordActivity #landing .discordSeatMini .lobbyAvatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 50% !important;
    }

    html body #landing .discordSeatMini .seatName,
    html body #landing .discordSeatMini.discordSeatLarge .seatName,
    html body.discordActivity #landing .discordSeatMini .seatName,
    html body.discordActivity #landing .discordSeatMini.discordSeatLarge .seatName {
        position: relative !important;
        z-index: 3 !important;
        display: block !important;
        width: 100% !important;
        max-width: 48px !important;
        min-height: 12px !important;
        height: 12px !important;
        margin: -3px auto 0 !important;
        padding: 2px 3px !important;
        border-radius: 999px !important;
        font-size: 6.5px !important;
        line-height: 8px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body #landing .discordRoleBox .discordRoleJoin:not(.hidden),
    html body.discordActivity #landing .discordRoleBox .discordRoleJoin:not(.hidden) {
        order: 3 !important;
        flex: 0 0 auto !important;
        align-self: center !important;
        position: relative !important;
        z-index: 6 !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 42px !important;
        height: 22px !important;
        min-height: 22px !important;
        margin: 1px auto 0 !important;
        padding: 2px 7px !important;
        border-radius: 999px !important;
        font-size: 8px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    html body #landing .discordRoleBox .discordRoleJoin:disabled,
    html body.discordActivity #landing .discordRoleBox .discordRoleJoin:disabled {
        display: inline-flex !important;
        visibility: visible !important;
    }

    html body #landing .discordSpectatorCard,
    html body.discordActivity #landing .discordSpectatorCard {
        grid-area: spec !important;
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 8px 3px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        align-self: stretch !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        border-radius: 12px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body #landing .discordSpectatorCard h2,
    html body.discordActivity #landing .discordSpectatorCard h2 {
        position: relative !important;
        order: 1 !important;
        flex: 0 0 18px !important;
        width: 26px !important;
        height: 18px !important;
        min-height: 18px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        overflow: visible !important;
    }

    html body #landing .discordSpectatorCard h2::before,
    html body.discordActivity #landing .discordSpectatorCard h2::before {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 21px !important;
        height: 12px !important;
        border: 2px solid #9da2aa !important;
        border-radius: 50% / 60% !important;
        background: transparent !important;
        transform: translate(-50%, -50%) !important;
        box-sizing: border-box !important;
    }

    html body #landing .discordSpectatorCard h2::after,
    html body.discordActivity #landing .discordSpectatorCard h2::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 5px !important;
        height: 5px !important;
        border-radius: 50% !important;
        background: #9da2aa !important;
        box-shadow: 0 0 4px rgba(157, 162, 170, .35) !important;
        transform: translate(-50%, -50%) !important;
    }

    html body #landing .discordSpectatorCard .discordSeatList,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatList {
        order: 2 !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        overflow: visible !important;
    }

    html body #landing .discordSpectatorCard .discordSeatList:empty {
        display: none !important;
    }

    html body #landing .discordSpectatorCard .discordSeatMini,
    html body #landing .discordSpectatorCard .discordSeatMini.discordSeatLarge,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini.discordSeatLarge {
        width: 27px !important;
        min-width: 27px !important;
        max-width: 27px !important;
        min-height: 27px !important;
        height: 27px !important;
        display: grid !important;
        place-items: center !important;
    }

    html body #landing .discordSpectatorCard .discordSeatMini .avatar,
    html body #landing .discordSpectatorCard .discordSeatMini .lobbyAvatar,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini .avatar,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini .lobbyAvatar {
        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;
        flex-basis: 25px !important;
        font-size: 14px !important;
    }

    html body #landing .discordSpectatorCard .discordSeatMini .seatName,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini .seatName,
    html body #landing .discordSpectatorCard .discordSeatMini em,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini em {
        display: none !important;
    }

    html body #landing .discordSpectatorCard .discordRoleJoin:not(.hidden),
    html body.discordActivity #landing .discordSpectatorCard .discordRoleJoin:not(.hidden) {
        order: 3 !important;
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 6 !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 23px !important;
        min-height: 23px !important;
        margin: auto auto 0 !important;
        padding: 2px !important;
        border-radius: 999px !important;
        font-size: 8px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }


    html body #landing .spectatorControlsMount,
    html body.discordActivity #landing .spectatorControlsMount {
        grid-area: controls !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 1px 0 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body #landing .spectatorControlsMount > #landingAdminBar,
    html body.discordActivity #landing .spectatorControlsMount > #landingAdminBar {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body #landing .spectatorControlsMount > #landingAdminBar:not(.hidden),
    html body.discordActivity #landing .spectatorControlsMount > #landingAdminBar:not(.hidden) {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }

    html body #landing .spectatorControlsMount > .modesFloating,
    html body.discordActivity #landing .spectatorControlsMount > .modesFloating {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        gap: 4px !important;
        transform: none !important;
        overflow: visible !important;
    }

    html body #landing .spectatorControlsMount #landingStartGameBtn,
    html body #landing .spectatorControlsMount #landingOptionsWrap,
    html body #landing .spectatorControlsMount #landingOptionsWrap > .optionsBtn,
    html body #landing .spectatorControlsMount .modesBtn,
    html body.discordActivity #landing .spectatorControlsMount #landingStartGameBtn,
    html body.discordActivity #landing .spectatorControlsMount .modesBtn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 3px 5px !important;
        border-radius: 8px !important;
        font-size: 8px !important;
        line-height: 1 !important;
    }

    html body #landing .spectatorControlsMount #modesBtn {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    html body #landing .spectatorControlsMount #modesMenu {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    html body #landing .spectatorControlsMount #backgroundBtn {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    html body #landing .spectatorControlsMount #backgroundMenu {
        grid-column: 1 !important;
        grid-row: 4 !important;
    }

    html body #landing .spectatorControlsMount .modesMenu,
    html body #landing .spectatorControlsMount .backgroundMenu,
    html body.discordActivity #landing .spectatorControlsMount .modesMenu,
    html body.discordActivity #landing .spectatorControlsMount .backgroundMenu {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 5px !important;
        display: grid !important;
        gap: 4px !important;
        overflow: visible !important;
        transform: none !important;
        z-index: auto !important;
        box-sizing: border-box !important;
    }

    html body #landing .spectatorControlsMount .modesMenu.hidden,
    html body #landing .spectatorControlsMount .backgroundMenu.hidden,
    html body.discordActivity #landing .spectatorControlsMount .modesMenu.hidden,
    html body.discordActivity #landing .spectatorControlsMount .backgroundMenu.hidden {
        display: none !important;
    }

    html body #landing .spectatorControlsMount .modeChoice,
    html body.discordActivity #landing .spectatorControlsMount .modeChoice {
        width: 100% !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
    }


    html body #landing .discordLobbyTop:empty,
    html body #landing #lobbyPreview.hidden,
    html body #landing .actions.hidden {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


@media (max-width: 600px) and (max-height: 760px) {
    html body #landing .homeTitleSplit.dstyTitleWrap,
    html body #landing .dstyTitleWrap {
        height: 43px !important;
        min-height: 43px !important;
        max-height: 43px !important;
    }

    html body #landing .homeDstyLogo,
    html body #landing .letterFillTitle {
        max-height: 43px !important;
        font-size: 24px !important;
    }

    html body #landing .characterGrid .char,
    html body #landing .char {
        height: 31px !important;
        min-height: 31px !important;
    }

    html body #landing .teamChooseTitle {
        height: 32px !important;
        min-height: 32px !important;
    }
}


@media (max-width: 600px) {
    @supports selector(body:has(#app > #landing:not(.hidden))) {
        html:has(body #app > #landing:not(.hidden)),
        body:has(#app > #landing:not(.hidden)) {
            width: 100% !important;
            height: 100dvh !important;
            min-height: 100dvh !important;
            max-height: 100dvh !important;
            margin: 0 !important;
            overflow: hidden !important;
            overscroll-behavior: none !important;
        }

        html body #app:has(> #landing:not(.hidden)) {
            position: relative !important;
            width: 100% !important;
            height: 100dvh !important;
            min-height: 100dvh !important;
            max-height: 100dvh !important;
            margin: 0 !important;
            padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px)) !important;
            overflow-x: hidden !important;
            overflow-y: scroll !important;
            overscroll-behavior-y: contain !important;
            -webkit-overflow-scrolling: touch !important;
            touch-action: pan-y !important;
            scrollbar-gutter: stable !important;
        }

        html body #app:has(> #landing:not(.hidden)) > #landing.landing:not(.hidden),
        html body.discordActivity #app:has(> #landing:not(.hidden)) > #landing.landing:not(.hidden) {
            position: relative !important;
            inset: auto !important;
            width: min(100%, 430px) !important;
            height: auto !important;
            min-height: 100% !important;
            max-height: none !important;
            margin: 0 auto !important;
            padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
            overflow: visible !important;
            transform: none !important;
            touch-action: pan-y !important;
        }

        html body #app:has(> #landing:not(.hidden)) #backgroundMenu:not(.hidden),
        html body #app:has(> #landing:not(.hidden)) #modesMenu:not(.hidden) {
            position: static !important;
            max-height: none !important;
            overflow: visible !important;
            touch-action: pan-y !important;
        }
    }
}

@media (max-width: 600px) {
    html body #landing .discordSpectatorCard,
    html body.discordActivity #landing .discordSpectatorCard {
        align-self: stretch !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 7px 3px !important;
        gap: 4px !important;

        overflow: hidden !important;
    }


    html body #landing .discordSpectatorCard h2,
    html body.discordActivity #landing .discordSpectatorCard h2 {
        flex: 0 0 18px !important;
        margin: 0 auto !important;
    }


    html body #landing .discordSpectatorCard .discordSeatList,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatList {
        order: 2 !important;
        flex: 1 1 0 !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 2px 0 !important;

        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 5px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    html body #landing .discordSpectatorCard .discordSeatList::-webkit-scrollbar,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatList::-webkit-scrollbar {
        display: none !important;
    }


    html body #landing .discordSpectatorCard .discordSeatMini,
    html body #landing .discordSpectatorCard .discordSeatMini.discordSeatLarge,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini.discordSeatLarge {
        position: relative !important;

        flex: 0 0 43px !important;

        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;

        height: 43px !important;
        min-height: 43px !important;
        max-height: 43px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;

        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;

        overflow: visible !important;
    }


    html body #landing .discordSpectatorCard .discordSeatMini .avatar,
    html body #landing .discordSpectatorCard .discordSeatMini .lobbyAvatar,
    html body #landing .discordSpectatorCard .discordSeatMini.discordSeatLarge .avatar,
    html body #landing .discordSpectatorCard .discordSeatMini.discordSeatLarge .lobbyAvatar,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini .avatar,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini .lobbyAvatar {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        flex: 0 0 38px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: grid !important;
        place-items: center !important;

        border-radius: 50% !important;
        font-size: 20px !important;
        overflow: hidden !important;
    }

    html body #landing .discordSpectatorCard .discordSeatMini .avatar img,
    html body #landing .discordSpectatorCard .discordSeatMini .lobbyAvatar img,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini .avatar img,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini .lobbyAvatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 50% !important;
    }


    html body #landing .discordSpectatorCard .discordSeatMini .seatName,
    html body #landing .discordSpectatorCard .discordSeatMini.discordSeatLarge .seatName,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini .seatName,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini.discordSeatLarge .seatName {
        position: absolute !important;
        z-index: 5 !important;

        left: 50% !important;
        bottom: 1px !important;
        transform: translateX(-50%) !important;

        display: block !important;

        width: 46px !important;
        max-width: 46px !important;
        height: 11px !important;
        min-height: 11px !important;

        margin: 0 !important;
        padding: 1px 3px !important;

        border: 1px solid rgba(190, 194, 201, .65) !important;
        border-radius: 999px !important;

        background: linear-gradient(
            180deg,
            rgba(92, 96, 103, .96),
            rgba(25, 26, 29, .96)
        ) !important;

        color: #f1f2f4 !important;
        font-size: 5.5px !important;
        font-weight: 1000 !important;
        line-height: 7px !important;
        text-align: center !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;

        box-shadow: 0 2px 5px rgba(0, 0, 0, .55) !important;
    }

    html body #landing .discordSpectatorCard .discordSeatMini em,
    html body.discordActivity #landing .discordSpectatorCard .discordSeatMini em {
        display: none !important;
    }


    html body #landing .discordSpectatorCard .discordRoleJoin:not(.hidden),
    html body.discordActivity #landing .discordSpectatorCard .discordRoleJoin:not(.hidden) {
        order: 3 !important;
        flex: 0 0 23px !important;

        margin: 0 auto !important;

        width: 44px !important;
        min-width: 44px !important;
        height: 23px !important;
        min-height: 23px !important;
    }
}