/* OldStyller mobile v2 — desktop permanece intacto */
@media screen and (max-width: 900px) {
    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }
    #ArtworkHelper,
    #Bodycontainer {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Remove o grande espaço decorativo do desktop no celular. */
    #LeftArtwork {
        display: none !important;
    }

    #ContentRow {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        top: 125px !important;
        margin: 0 !important;
        padding: 0 10px 24px !important;
        box-sizing: border-box !important;
    }

    #MenuColumn,
    #ContentColumn,
    #ThemeboxesColumn {
        position: relative !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    #MenuColumn {
        order: 1 !important;
    }
    #ContentColumn {
        order: 2 !important;
    }
    #ThemeboxesColumn {
        order: 3 !important;
        margin-top: 12px !important;
    }

    /* Login compacto no topo. */
    #Loginbox {
        position: relative !important;
        width: 220px !important;
        max-width: calc(100vw - 30px) !important;
        height: 94px !important;
        margin: 0 auto 10px !important;
        padding: 10px 9px 9px !important;
    }

    /* Menu sem o retângulo vazio: duas colunas de verdade. */
    #Menu {
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
        gap: 7px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        padding: 7px !important;
        height: auto !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }
    #MenuTop,
    #MenuBottom {
        display: none !important;
    }
    #Menu .menuitem {
        width: 100% !important;
        margin: 0 !important;
        min-width: 0 !important;
    }
    #Menu .MenuButton,
    #Menu .MenuButton .Button {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
    #Menu .MenuButton .Label {
        left: 40px !important;
        right: 20px !important;
        width: auto !important;
        text-align: center !important;
    }
    #Menu .Submenu {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
    #Menu .Submenuitem {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* Conteúdo passa a ser a parte dominante da tela. */
    #ContentColumn .Content,
    #ContentHelper,
    #ContentColumn .Box,
    #ContentColumn .BoxContent {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    #ContentColumn img,
    #ContentColumn video,
    #ContentColumn iframe,
    #ThemeboxesColumn img {
        max-width: 100% !important;
        height: auto;
    }
    #ContentColumn table {
        max-width: 100% !important;
    }

    /* Painéis da direita ficam no fim, sem apertar o conteúdo. */
    #Themeboxes {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #Themeboxes > *,
    #Themeboxes .Themebox,
    #OldStyllerTopLevel,
    #OldStyllerGuildFrags,
    #OldStyllerStatus {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

@media screen and (max-width: 520px) {
    #ContentRow {
        top: 105px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    #Menu {
        gap: 5px !important;
        padding: 5px !important;
    }
    #Menu .MenuButton .Label {
        font-size: 14px !important;
    }
    #Themeboxes {
        grid-template-columns: 1fr !important;
    }
    #ContentColumn .BoxContent {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}