@media screen and (max-width: 900px) {
    #gameMapHud {
        top: 16px;
        left: 16px;
        width: calc(100% - 32px);
        padding: 18px;
        border-radius: 18px;
    }

    #gameMapLegend {
        right: 16px;
        bottom: 16px;
        left: 16px;
        min-width: auto;
    }
}

@media screen and (max-width: 640px) {
    #gameMapTitle {
        font-size: 24px;
    }

    #gameMapSubtitle,
    #gameMapHint,
    #gameMapStatus {
        font-size: 13px;
    }

    #gameMapLegend {
        padding: 14px;
        border-radius: 16px;
    }
}